React native Key Points

React Native — App

// App.js
import React from 'react';
import { Text, View } from 'react-native';

export default class App extends React.Component {
render() {
return (
<View>
<Text>Welcome to Buggu Buggie's Techno</Text>
</View>
);
}
}

React Native — State & Props

// ParentComponent.js - For explaining state objectstate = {
myState: 'Lorem ipsum dolor sit amet' // Assign the initial value
}
updateState = () ⇒ this.setState({ myState: 'The state is updated' }) // Updating the state objectrender() {
return (
<View>
<ChildComponent myState = {this.state.myState} updateState = {this.updateState}/>
</View>
);
// ChildComponent
const ChildComponent = (props) => {
return (
<View>
<Text onPress = {props.updateState}>
{props.myState}
</Text>
</View>
)
}

React Native — Styling

import { Text, View, StyleSheet } from 'react-native'
...
<View>
<Text style = {styles.myText}>
{props.myState}
</Text>
</View>
...
const styles = StyleSheet.create ({
myState: {
marginTop: 20,
textAlign: 'center',
color: 'blue',
fontWeight: 'bold',
fontSize: 20
}
})

React Native — Flexbox

React Native — Text Input, ScrollView, List

Text Input:

import { ..., TextInput} from 'react-native'
...
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Email"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleEmail}/>
...

ScrollView:

List:

...
class List extends Component {
state = {
names: [
{
id: 0,
name: 'Ben',
},
{
id: 1,
name: 'Susan',
},
{
id: 2,
name: 'Robert',
},
{
id: 3,
name: 'Mary',
}
]
}
...
<View>
{
this.state.names.map((item, index) => (
<TouchableOpacity
key = {item.id}
style = {styles.container}
onPress = {() => this.alertItemName(item)}>
<Text style = {styles.text}>
{item.name}
</Text>
</TouchableOpacity>
))
}
</View>
...

React Native — Images

Local folder:

import { Image } from 'react-native'

...
<Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
...

Screen Density:

my-image@2x.jpg
my-image@3x.jpg

Network Images:

import { View, Image } from 'react-native'

...
<Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
style = {{ width: 200, height: 200 }}
/>

React Native — HTTP

componentDidMount = () => {
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
})
.catch((error) => {
console.error(error);
});
}

React Native — Buttons

import { Button } from 'react-native'
...
<Button
onPress = {handlePress}
title = "Red button!"
color = "red"
/>
...

Touchable Opacity:

import { TouchableOpacity, ... } from 'react-native'
...
<TouchableOpacity>
<Text style = {styles.text}>
Button
</Text>
</TouchableOpacity>
...

Touchable Highlight:

import { TouchableHighlight, ... } from 'react-native'
...
<TouchableHighlight>
<Text style = {styles.text}>
Button
</Text>
</TouchableHighlight>
...

Touchable Native Feedback:

import { TouchableNativeFeedback, ... } from 'react-native'
...
<TouchableNativeFeedback>
<Text style = {styles.text}>
Button
</Text>
</TouchableNativeFeedback>
...

Touchable Without Feedback:

<TouchableWithoutFeedback>
<Text>
Button
</Text>
</TouchableWithoutFeedback>

React Native — Animations

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'

class Animations extends Component {
componentWillMount = () => {
this.animatedWidth = new Animated.Value(50)
this.animatedHeight = new Animated.Value(100)
}
animatedBox = () => {
Animated.timing(this.animatedWidth, {
toValue: 200,
duration: 1000
}).start()
Animated.timing(this.animatedHeight, {
toValue: 500,
duration: 500
}).start()
}
render() {
const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
return (
<TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
<Animated.View style = {[styles.box, animatedStyle]}/>
</TouchableOpacity>
)
}
}
export default Animations

const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
box: {
backgroundColor: 'blue',
width: 50,
height: 100
}
})

React Native — Debugging

  • Reload − Used for reloading simulator. You can use shortcut command + R
  • Debug JS Remotely − Used for activating debugging inside browser developer console.
  • Enable Live Reload − Used for enabling live reloading whenever your code is saved. The debugger will open at localhost:8081/debugger-ui.
  • Start Systrace − Used for starting Android marker based profiling tool.
  • Show Inspector − Used for opening inspector where you can find info about your components. You can use shortcut command + I
  • Show Perf Monitor − Perf monitor is used for keeping track of the performance of your app.

React Native — View

Use Cases:

  • Wrap the elements inside the container, we can use View as a container element.
<View>
<Text>Button </Text>
</View>
  • Nest more elements inside the parent element, both parent and child can be View. It can have as many children as you want.
<View>
<View>
<Text>Child 1</Text>
</View>
<View>
<Text>Child 2</Text>
</View>
</View>
  • Style different elements, you can place them inside View since it supports style property, flexbox etc.
<View style={styles.parentContain}>
<View style={styles.childContain}>
<Text>Child 1</Text>
</View>
<View style={styles.childContain}>
<Text>Child 2</Text>
</View>
</View>
  • View also supports synthetic touch events, which can be useful for different purposes.
<View onPress={()=>pressMe()}>
<Text>Button </Text>
</View>

React Native — WebView

import { View, WebView, StyleSheet } from 'react-native'
...
<View style = {styles.container}>
<WebView
source = {{ uri:
'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=xyz' }}
/>
</View>
...

React Native — ActivityIndicator

import { ActivityIndicator, ... } from 'react-native';

...
state = { animating: true }

<View style = {styles.container}>
<ActivityIndicator
animating = {animating}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}/>
</View>
...

React Native — Status Bar

import { StatusBar } from 'react-native'

...
<StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/>
...

React Native — Geolocation

// Component
state = {
initialPosition: 'unknown',
lastPosition: 'unknown',
}
watchID: ?number = null;
componentDidMount = () => {
navigator.geolocation.getCurrentPosition(
(position) => {
const initialPosition = JSON.stringify(position);
this.setState({ initialPosition });
},
(error) => alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
this.watchID = navigator.geolocation.watchPosition((position) => {
const lastPosition = JSON.stringify(position);
this.setState({ lastPosition });
});
}
componentWillUnmount = () => {
navigator.geolocation.clearWatch(this.watchID);
}

React Native — AsyncStorage

import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'

class AsyncStorageExample extends Component {
state = {
'name': ''
}
componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))

setName = (value) => {
AsyncStorage.setItem('name', value);
this.setState({ 'name': value });
}

React Native Limitations

  • Native Components − If you want to create native functionality which is not created yet, you will need to write some platform specific code.

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting Started with TestProject JavaScript OpenSDK

How to Set Up VueFileManager with AWS S3 as an External Storage

The basics of regular expressions — explained simply

Chrome 80: Changes to look out for on 4th February

Day 28/100 What’s Next?

10 Important Interview Question in JavaScript

Async/Await….and Promises, what?

Level up your JavaScript browser logs with these console.log() tips

Banner image depicting ninjas

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saismita Lenka

Saismita Lenka

Software Engineer

More from Medium

Will React Native die in 2022?

Handling custom layouts on Device orientation changes in React Native

Install React Native modules with Expo

Redux-Saga UnitTesting