ActivityIndicator is the common circular loading indicator used in both android and iOS devices. This type of loader which is basically used to display a loading dotted moving circle on android and iPhone devices, When user trying to loading something from server. So when the application is retrieving data from server then by that time the indicator ActivityIndicator will show on device screen and when the data finish loading then it will be hidden using states. So in this tutorial we would going to Show and hide an ActivityIndicator on application screen on button click.
Contents in this project React Native ActivityIndicator Example Tutorial :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add
AppRegistry ,
StyleSheet ,
View ,
ActivityIndicator and
Button component in import block.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, View, ActivityIndicator, Button } from ‘react-native’;
|
3. Create constructor in your main class with props and super method. Now declare a state using this.state named as isLoading and set isLoading value as true.
This isLoading state is used to show and hide the
ActivityIndicator . When isLoading value is false then
ActivityIndicator will be hidden and when the isLoading value is true then
ActivityIndicator will be displayed.
|
1
2
3
4
5
6
|
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
|
4. Create function named as ShowHideActivityIndicator . This function would change the is isLoading state value on button click.
|
1
2
3
4
5
6
7
8
9
10
11
|
ShowHideActivityIndicator = () =>{
if(this.state.isLoading == true)
{
this.setState({isLoading: false})
}
else
{
this.setState({isLoading: true})
}
}
|
5. Create custom style css class named as MainContainer .
|
1
2
3
4
5
6
7
8
9
10
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
});
|
6. Add View as parent view in render’s return block and Call the MainContainer class into View.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
}
|
7. Add curly brackets { } in View component, and inside the curly brackets using the ternary operator ? check isLoading state value and display the ActivityIndicator .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
render() {
return (
<View style={styles.MainContainer}>
{
// Here the ? Question Mark represent the ternary operator.
this.state.isLoading ? <ActivityIndicator style={{padding: 20}} /> : null
}
</View>
);
}
}
|
8. Add Button component in View and set onPress on button and call ShowHideActivityIndicator function on button click.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render() {
return (
<View style={styles.MainContainer}>
{
// Here the ? Question Mark represent the ternary operator.
this.state.isLoading ? <ActivityIndicator style={{padding: 20}} /> : null
}
<Button title=“Hide ActivityIndicator” onPress={this.ShowHideActivityIndicator} />
</View>
);
}
}
|
9. Complete source code for index.android.js / index.ios.js file.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, View, ActivityIndicator, Button } from ‘react-native’;
class MainProject extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
ShowHideActivityIndicator = () =>{
if(this.state.isLoading == true)
{
this.setState({isLoading: false})
}
else
{
this.setState({isLoading: true})
}
}
render() {
return (
<View style={styles.MainContainer}>
{
// Here the ? Question Mark represent the ternary operator.
this.state.isLoading ? <ActivityIndicator style={{padding: 20}} /> : null
}
<Button title=“Hide ActivityIndicator” onPress={this.ShowHideActivityIndicator} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
});
AppRegistry.registerComponent(‘MainProject’, () => MainProject);
|
Screenshot in iOS device :
Screenshot in Android device :
Also Read :
React Native Create Custom Alert Dialog Box in Android iOS App Tutorial
React Native Implement Custom reCaptcha in Android iOS Example
React Native Fetch API Tutorial to Insert Into MySQL Database Using PHP iOS Android Example
React Native Insert Text Input Data To MySQL Server Android iOS Tutorial
React Native Apply Filter on JSON ListView Data Using PHP MySQL
