Tutorial React Native
Tutorial React Native
i
React Native
Audience
This tutorial is designed for JavaScript and React developers who aspire to learn mobile
building skills. By following this course, you will expand your React and JavaScript
knowledge, learn some concepts of functional programming, and prepare to enter the
mobile world.
Since JavaScript world is moving forward, we will keep up with it and use EC6 syntax in
this tutorial.
Prerequisites
To be able to follow this tutorial, you should be familiar with React and have solid
JavaScript knowledge. Even if you do not have previous experience with React, you should
be able to follow it. In this tutorial, we will explain some fundamental React concepts.
All the content and graphics published in this e-book are the property of Tutorials Point (I)
Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish
any contents or a part of contents of this e-book in any manner without written consent
of the publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.
Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our
website or its contents including this tutorial. If you discover any errors on our website or
in this tutorial, please notify us at contact@tutorialspoint.com
i
React Native
Table of Contents
About the Tutorial ............................................................................................................................................ i
Audience ........................................................................................................................................................... i
Prerequisites ..................................................................................................................................................... i
Copyright & Disclaimer ..................................................................................................................................... i
Table of Contents ............................................................................................................................................ ii
iii
React Native
Core Concepts
1
1. React Native – Overview React Native
For better understanding of React Native concepts, we will borrow a few lines from the
official documentation –
React Native lets you build mobile apps using only JavaScript. It uses the same design as
React, letting you compose a rich mobile UI from declarative components. With React
Native, you don't build a mobile web app, an HTML5 app, or a hybrid app; you build a real
mobile app that's indistinguishable from an app built using Objective-C or Java. React
Native uses the same fundamental UI building blocks as regular iOS and Android apps.
You just put those building blocks together using JavaScript and React.
React – This is a Framework for building web and mobile apps using JavaScript.
JavaScript − You can use the existing JavaScript knowledge to build native mobile
apps.
Code sharing − You can share most of your code on different platforms.
Community – The community around React and React Native is large, and you
will be able to find any answer you need.
2
2. React Native – Environment Setup React Native
There are a couple of things you need to install to set up the environment for React Native.
We will use OSX as our building platform.
1 NodeJS and NPM You can follow our NodeJS Environment Setup tutorial
to install NodeJS.
C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative
After executing the above command, a folder with specifies name is created with the
following contents.
3
React Native
4
React Native
C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start
5
React Native
As instructed, one way to run react native apps on your android devise is to using expo.
Install expo client in your android devise and scan the above obtained QR code.
This prompts you options to eject, select the first one using arrows and press enter.
Then, you should suggest the name of the app on home screen and project name of the
Android studio and Xcode projects.
Though your project ejected successfully, you may get an error as:
6
React Native
Ignore this error and run react native for android using the following command-
react-native run-android
7
React Native
After downloading the installation file of it, double click on it and proceed with the
installation.
Click on the Next button you will see a System Image window. Select the x86 Images
tab.
9
React Native
10
React Native
After configuring your virtual device click on the play button under the Actions column to
start your android emulator.
11
React Native
Then, your app execution begins in another prompt you can see its status.
In your android emulator you can see the execution of the default app as:
12
React Native
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk
If not, click on the android emulator press ctrl+m then, select Enable Hot Reloading
option.
13
React Native
14
3. Basic ReactNative App React Native
If you open the default app you can observe that the app.js file looks like
Output:
15
React Native
Hello world
To display a simple message saying “Welcome to Tutorialspoint” remove the CSS part
and insert the message to be printed wrapped by the <text></text> tags inside
<view></view> as shown below.
17
4. React Native – State React Native
The data inside React Components is managed by state and props. In this chapter, we
will talk about state.
Using State
This is our root component. We are just importing Home which will be used in most of the
chapters.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
18
React Native
We can see in emulator text from the state as in the following screenshot.
Updating State
Since state is mutable, we can update it by creating the deleteState function and call it
using the onPress = {this.deleteText} event.
Home.js
state = {
myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
19
React Native
render() {
return (
<View>
<Text onPress = {this.updateState}>
{this.state.myState}
</Text>
</View>
);
}
}
NOTES − In all chapters, we will use the class syntax for stateful (container) components
and function syntax for stateless (presentational) components. We will learn more about
components in our next chapter.
We will also learn how to use the arrow function syntax for updateState. You should keep
in mind that this syntax uses the lexical scope, and this keyword will be bound to the
environment object (Class). This will sometimes lead to unexpected behavior.
The other way to define methods is to use the EC5 functions but in that case we will need
to bind this manually in the constructor. Consider the following example to understand
this.
constructor(){
super()
this.updateState = this.updateState.bind(this)
20
React Native
updateState(){
//
}
render(){
//
}
}
21
5. React Native – Props React Native
In our last chapter, we showed you how to use mutable state. In this chapter, we will
show you how to combine the state and the props.
Presentational components should get all data by passing props. Only container
components should have state.
Container Component
We will now understand what a container compenent is and also how it works.
Theory
Now we will update our container component. This component will handle the state and
pass the props to the presentational component.
Container component is only used for handling state. All functionality related to view
(styling etc.) will be handled in the presentational component.
Example
If we want to use example from the last chapter we need to remove the Text element
from the render function since this element is used for presenting text to the users. This
should be inside the presentational component.
Let us review the code in the example given below. We will import the
PresentationalComponent and pass it to the render function.
App.js:
22
React Native
}
updateState = () => {
this.setState({ myState: 'The state is updated' })
}
render() {
return (
<View>
<PresentationalComponent myState = {this.state.myState} updateState =
{this.updateState}/>
</View>
);
}
}
Presentational Component
We will now understand what a presentational component is and also how it works.
Theory
Presentational components should be used only for presenting view to the users. These
components do not have state. They receive all data and functions as props.
Example
As we mentioned in our previous chapter, we are using the EC6 function syntax for
presentational components.
Our component will receive props, return view elements, present text using
{props.myText} and call the {props.deleteText} function when a user clicks on the
text.
PresentationalComponent.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
23
React Native
</Text>
</View>
)
}
export default PresentationalComponent
Now, we have the same functionality as in our State chapter. The only difference is that
we refactored our code to the container and the presentational component.
24
React Native
You can run the app and see the text as in the following screenshot.
25
React Native
26
6. React Native – Styling React Native
You can use the style property to add the styles inline. However, this is not the best
practice because it can be hard to read the code.
Container Component
In this section, we will simplify our container component from our previous chapter.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'
Presentational Component
In the example given below, we will import the StyleSheet.
At the bottom of the file, we will create our stylesheet and assign it to the styles constant.
Note that our styles are in camelCase and we do not use px or % for styling.
To apply styles to our text, we need to add style = {styles.myText} property to the
Text element.
27
React Native
PresentationalComponent.js
import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
28
React Native
29
7. React Native – Flexbox React Native
We will use the same code that we used in our React Native - Styling chapter. We will
only change the PresentationalComponent.
Layout
To achieve the desired layout, flexbox offers three main properties − flexDirection
justifyContent and alignItems.
If the items needs to be aligned verticaly and also centralized, consider the example given
below.
App.js
import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
30
React Native
Output:
31
React Native
If the items need to be moved to the right side and spaces need to be added between
them, we can use the following code.
App.js
import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
}
export default App
const styles = StyleSheet.create ({
container: {
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-end',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
})
33
React Native
34
React Native
35
8. React Native – ListView React Native
In this chapter, we will show you how to create list in React Native. We will import List in
our Home component and show it on screen.
App.js
import React from 'react'
import List from './List.js'
To create a list, we will use the map() method. This will iterate over an array of items,
and render each one.
List.js
import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
36
React Native
name: 'Robert',
},
{
id: 3,
name: 'Mary',
}
]
}
alertItemName = (item) => {
alert(item.name)
}
render() {
return (
<View>
{
this.state.names.map((item, index) => (
<TouchableOpacity
key = {item.id}
style = {styles.container}
onPress = {() => this.alertItemName(item)}>
backgroundColor: '#d9f9b1',
alignItems: 'center',
},
text: {
color: '#4f603c'
}
})
You can click on each item in the list to trigger an alert with the name.
38
React Native
39
9. React Native – Text Input React Native
In this chapter, we will show you how to work with TextInput elements in React Native.
The Home component will import and render inputs.
App.js
import React from 'react';
import Inputs from './inputs.js'
Inputs
We will define the initial state.
After defining the initial state, we will create the handleEmail and the handlePassword
functions. These functions are used for updating state.
The login() function will just alert the current value of the state.
We will also add some other properties to text inputs to disable auto capitalisation, remove
the bottom border on Android devices and set a placeholder.
inputs.js
import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-
native'
40
React Native
}
handlePassword = (text) => {
this.setState({ password: text })
}
login = (email, pass) => {
alert('email: ' + email + ' password: ' + pass)
}
render(){
return (
<View style = {styles.container}>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Email"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleEmail}/>
<TouchableOpacity
style = {styles.submitButton}
onPress = {
() => this.login(this.state.email, this.state.password)
}>
<Text style = {styles.submitButtonText}> Submit </Text>
</TouchableOpacity>
</View>
)
}
}
export default Inputs
41
React Native
42
React Native
Whenever we type in one of the input fields, the state will be updated. When we click on
the Submit button, text from inputs will be shown inside the dialog box.
Whenever we type in one of the input fields, the state will be updated. When we click on
the Submit button, text from inputs will be shown inside the dialog box.
43
React Native
44
10. React Native – ScrollView React Native
In this chapter, we will show you how to work with the ScrollView element.
App.js
import React from 'react';
import ScrollViewExample from './scroll_view.js';
ScrollView.js:
this.state.names.map((item, index) ⇒ (
When we run the app, we will see the scrollable list of names.
46
React Native
47
11. React Native – Images React Native
In this chapter, we will understand how to work with images in React Native.
Adding Image
Let us create a new folder img inside the src folder. We will add our image
(myImage.png) inside this folder.
App.js
import React from 'react';
import ImagesExample from './ImagesExample.js'
const App = () => {
return (
<ImagesExample />
)
}
export default App
image_example.js:
Output:
48
React Native
Screen Density
React Native offers a way to optimize images for different devices using @2x, @3x suffix.
The app will load only the image necessary for particular screen density.
The following will be the names of the image inside the img folder.
my-image@2x.jpg
my-image@3x.jpg
49
React Native
Network Images
When using network images, instead of require, we need the source property. It is
recommended to define the width and the height for network images.
App.js
import React from 'react';
import ImagesExample from './image_example.js'
image_example.js:
Output:
50
React Native
51
12. React Native – HTTP React Native
In this chapter, we will show you how to use fetch for handling network requests.
App.js
import React from 'react';
import HttpExample from './http_example.js'
Using Fetch
We will use the componentDidMount lifecycle method to load the data from server as
soon as the component is mounted. This function will send GET request to the server,
return JSON data, log output to console and update our state.
http_example.js
52
React Native
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
<View>
<Text>
{this.state.data.body}
</Text>
</View>
)
}
}
export default HttpExample
Output:
53
React Native
54
13. React Native – Buttons React Native
In this chapter, we will show you touchable components in react Native. We call them
'touchable' because they offer built in animations and we can use the onPress prop for
handling touch event.
Facebook offers the Button component, which can be used as a generic button. Consider
the following example to understand the same.
App.js
import React, { Component } from 'react'
import { Button } from 'react-native'
If the default Button component does not suit your needs, you can use one of the following
components instead.
55
React Native
56
React Native
Touchable Opacity
This element will change the opacity of an element when touched.
App.js
import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
57
React Native
Touchable Highlight
When a user presses the element, it will get darker and the underlying color will show
through.
App.js
import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'
</Text>
</TouchableHighlight>
</View>
)
}
export default App
App.js
import React from 'react'
import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native'
59
React Native
)
}
export default Home
60
React Native
<TouchableWithoutFeedback>
<Text>
Button
</Text>
</TouchableWithoutFeedback>
61
14. React Native – Animations React Native
In this chapter, we will show you how to use LayoutAnimation in React Native.
Animations Component
We will set myStyle as a property of the state. This property is used for styling an element
inside PresentationalAnimationComponent.
In this example, we will dynamically change the width and the height of the box. Since
the Home component will be the same, we will only change the Animations component.
App.js
import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'
62
React Native
63
15. React Native – Debugging React Native
React native offers a couple of methods that help in debugging your code.
64
React Native
Reload
This is used for reloading simulator. You can use the shortcut, command + R
65
React Native
Debug JS Remotely
This is used to activate debugging inside the browser developer console.
Start Systrace
This is used for starting the Android marker based profiling tool.
Show Inspector
This is used for opening inspector where you can find information about your components.
You can use the shortcut, command + I
66
16. React Native – Router React Native
Step 2
Since we want our router to handle the entire application, we will add it in index.ios.js.
For Android, you can do the same in index.android.js.
App.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import Routes from './Routes.js'
Routes.js
import React from 'react'
67
React Native
Home.js
import React from 'react'
import { TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
About.js
68
React Native
69
React Native
You can press the button to switch to the about screen. The Back arrow will appear; you
can use it to get back to the previous screen.
70
React Native
71
17. React Native – Running IOS React Native
If you want to test your app in the IOS simulator, all you need is to open the root folder
of your app in terminal and run −
react-native run-ios
The above command will start the simulator and run the app.
After you open the app in simulator, you can press command + D on IOS to open the
developers menu. You can check more about this in our debugging chapter.
72
18. React Native – Running Android React Native
We can run the React Native app on Android platform by running the following code in the
terminal.
react-native run-android
Before you can run your app on Android device, you need to enable USB Debugging
inside the Developer Options.
When USB Debugging is enabled, you can plug in your device and run the code snippet
given above.
The Native Android emulator is slow. We recommend downloading Genymotion for testing
your app.
73
React Native
74
19. React Native – View React Native
View is the most common element in React Native. You can consider it as an equivalent of
the div element used in web development.
Use Cases
Let us now see a few common use cases.
When you need to wrap your elements inside the container, you can use View as
a container element.
When you want to nest more elements inside the parent element, both parent and
child can be View. It can have as many children as you want.
When you want to style different elements, you can place them inside View since
it supports style property, flexbox etc.
View also supports synthetic touch events, which can be useful for different
purposes.
We already used View in our previous chapters and we will use it in almost all subsequent
chapters as well. The View can be assumed as a default element in React Native. In
example given below, we will nest two Views and a text.
App.js
import React, { Component } from 'react'
import { View, Text } from 'react-native'
Output:
75
React Native
76
20. React Native – WebView React Native
In this chapter, we will learn how to use WebView. It is used when you want to render
web page to your mobile app inline.
Using WebView
The HomeContainer will be a container component.
App.js
import React, { Component } from 'react'
import WebViewExample from './web_view_example.js'
web_view_example.js
import React, { Component } from 'react'
'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoi
nt' }}
/>
77
React Native
</View>
)
}
export default WebViewExample;
78
21. React Native – Modal React Native
In this chapter, we will show you how to use the modal component in React Native.
We will put logic inside ModalExample. We can update the initial state by running the
toggleModal.
After updating the initial state by running the toggleModal, we will set the visible
property to our modal. This prop will be updated when the state changes.
App.js
import React, { Component } from 'react'
import WebViewExample from './modal_example.js'
modal_example.js
import React, { Component } from 'react';
79
React Native
return (
<View style = {styles.container}>
<Modal animationType = {"slide"} transparent = {false}
visible = {this.state.modalVisible}
onRequestClose = {() => { console.log("Modal has been closed.")
} }>
<View style = {styles.modal}>
<Text style = {styles.text}>Modal is open!</Text>
80
React Native
},
text: {
color: '#3f2949',
marginTop: 10
}
})
81
React Native
82
React Native
83
React Native
84
22. React Native – ActivityIndicator React Native
In this chapter we will show you how to use the activity indicator in React Native.
Step 1 – App
App component will be used to import and show our ActivityIndicator.
App.js
import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'
Step 2 – ActivityIndicatorExample
Animating property is a Boolean which is used for showing the activity indicator. The latter
closes six seconds after the component is mounted. This is done using the
closeActivityIndicator() function.
activity_indicator_example.js
import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from
'react-native';
85
React Native
86
React Native
When we run the app, we will see the loader on screen. It will disappear after six seconds.
87
23. React Native – Picker React Native
In this chapter, we will create simple Picker with two available options.
App.js
import React from 'react'
import PickerExample from './PickerExample.js'
Step 2 – Logic
this.state.user is used for picker control.
PickerExample.js
import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
Output:
89
React Native
If you click on the name it prompts you all three options as:
90
React Native
And you can pick one of them and the output will be like.
91
React Native
92
24. React Native – Status Bar React Native
In this chapter, we will show you how to control the status bar appearance in React Native.
The Status bar is easy to use and all you need to do is set properties to change it.
The hidden property can be used to hide the status bar. In our example it is set to false.
This is default value.
The barStyle can have three values – dark-content, light-content and default.
This component has several other properties that can be used. Some of them are Android
or IOS specific. You can check it in official documentation.
App.js
import React, { Component } from 'react';
import { StatusBar } from 'react-native'
If we run the app, status bar will be visible and content will have dark color.
93
React Native
94
25. React Native – Switch React Native
Step 2 – Logic
We are passing value from the state and functions for toggling switch items to
SwitchExample component. Toggle functions will be used for updating the state.
App.js
Example
import React, { Component } from 'react'
import {
View
}
from 'react-native'
import SwitchExample from './switch_example.js'
render() {
return (
95
React Native
<View>
<SwitchExample
toggleSwitch1 = {this.toggleSwitch1}
switch1Value = {this.state.switch1Value}/>
</View>
);
}
}
Step 3 – Presentation
Switch component takes two props. The onValueChange prop will trigger our toggle
functions after a user presses the switch. The value prop is bound to the state of the
HomeContainer component.
switch_example.js
If we press the switch, the state will be updated. You can check values in the console.
Output:
96
React Native
97
26. React Native – Text React Native
This component can be nested and it can inherit properties from parent to child. This can
be useful in many ways. We will show you example of capitalizing the first letter, styling
words or parts of the text, etc.
text_example.js
Step 2 – App.js
In this step, we will just create a simple container.
App.js
import React, { Component } from 'react'
import TextExample from './text_example.js'
Step 3 – Text
In this step, we will use the inheritance pattern. styles.text will be applied to all Text
components.
You can also notice how we set other styling properties to some parts of the text. It is
important to know that all child elements have parent styles passed to them.
text_example.js
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
return (
<View style = {styles.container}>
<Text style = {styles.text}>
<Text style = {styles.capitalLetter}>
L
</Text>
<Text>
orem ipsum dolor sit amet, sed do eiusmod.
</Text>
<Text>
Ut enim ad <Text style = {styles.wordBold}>minim </Text> veniam,
quis aliquip ex ea commodo consequat.
</Text>
</View>
)
}
export default TextExample
99
React Native
padding: 20
},
text: {
color: '#41cdf4',
},
capitalLetter: {
color: 'red',
fontSize: 20
},
wordBold: {
fontWeight: 'bold',
color: 'black'
},
italicText: {
color: '#37859b',
fontStyle: 'italic'
},
textShadow: {
textShadowColor: 'red',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius : 5
}
})
100
React Native
101
27. React Native – Alert React Native
Step 1 – App.js
Step 2 – alert_example.js
We will create a button for triggering the showAlert function.
102
React Native
103
React Native
Output
When you click the button, you will see the following −
104
React Native
105
28. React Native – Geolocation React Native
Step 1 – App.js
import React from 'react'
import GeolocationExample from './geolocation_example.js'
Step 2 – Geolocation
We will start by setting up the initial state for that will hold the initial and the last position.
Now, we need to get current position of the device when a component is mounted using
the navigator.geolocation.getCurrentPosition. We will stringify the response so we
can update the state.
/AsyncStorageExample.js
import React, { Component } from 'react'
import { View, Text, Switch, StyleSheet} from 'react-native'
componentDidMount = () => {
navigator.geolocation.getCurrentPosition(
106
React Native
(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);
}
render() {
return (
<View style = {styles.container}>
<Text style = {styles.boldText}>
Initial position:
</Text>
<Text>
{this.state.initialPosition}
</Text>
<Text>
{this.state.lastPosition}
</Text>
</View>
)
}
}
107
React Native
108
React Native
109
29. React Native – AsyncStorage React Native
In this chapter, we will show you how to persist your data using AsyncStorage.
Step 1 – Presentation
In this step, we will create the App.js file.
Step 2 – Logic
Name from the initial state is empty string. We will update it from persistent storage when
the component is mounted.
setName will take the text from our input field, save it using AsyncStorage and update
the state.
110
React Native
}
render() {
return (
<View style = {styles.container}>
<TextInput style = {styles.textInput} autoCapitalize = 'none'
onChangeText = {this.setName}/>
<Text>
{this.state.name}
</Text>
</View>
)
}
}
export default AsyncStorageExample
When we run the app, we can update the text by typing into the input field.
111
React Native
Output
112
React Native
113