Circular progress bar also known as ActivityIndicator component in react native is a type of data loading widget which display on screen while loading content from internet. By default in react native we have ActivityIndicator component but it dose not blur or fade in complete application screen. So in this tutorial we are using react-native-loading-spinner-overlay custom component to make the loading spinner with screen overlay functionality. So in this tutorial we would React Native Screen Overlay ActivityIndicator Progress Bar Android iOS Example Tutorial.
Contents in this project React Native Screen Overlay ActivityIndicator Progress Bar Android iOS Example Tutorial:
1. Before getting started with application coding we have to download and install the react-native-loading-spinner-overlay component library in our current react native project. So open your react native project Root directory in Command Prompt or Terminal and execute below command.
|
1
|
npm install react–native–loading–spinner–overlay
|
Screenshot of CMD:
2. Now the library has been successfully downloaded and installed. Next step is to start coding. So open your project’s main App.js file and import View, StyleSheet and Text component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { View, StyleSheet, Text } from ‘react-native’;
|
3. Import Spinner component from react-native-loading-spinner-overlay library.
|
1
|
import Spinner from ‘react-native-loading-spinner-overlay’;
|
4. Creating our main export default App class extends Component.
|
1
2
3
4
|
export default class App extends Component {
}
|
5. Creating constructor() in our main class. Inside the constructor we would make a State named as isLoading with default false value. We would use this State to show and hide the React Native Screen Overlay ActivityIndicator Progress Bar.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(props) {
super(props);
this.state = {
isLoading: false
};
}
|
6. Creating componentDidMount() inbuilt method and here we would call the setInterval() method which automatically change the State value on every 3 seconds and show and hide the React Native Screen Overlay ActivityIndicator Progress Bar.
|
1
2
3
4
5
6
7
|
componentDidMount() {
setInterval(() => {
this.setState({
isLoading: !this.state.isLoading,
});
}, 3000);
}
|
7. Creating componentWillUnmount() method which would make the state value again false on application minimize time or when app is not used.
|
1
2
3
4
5
|
componentWillUnmount() {
this.setState({
isLoading: !this.state.isLoading,
});
}
|
8. Creating render’s return block and here we would make our Spinner component and Text component.
- visible : Used to show and hide the Spinner.
- textContent : To show some Text message on screen.
- textStyle : Apply style on Spinner text.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
render() {
return (
<View style={styles.MainContainer}>
<Spinner
visible={this.state.isLoading}
textContent={‘Data is Loading…’}
textStyle={styles.SpinnerText}
/>
<Text style={styles.text}>
Spinner Overlay Example Tutorial in React Native
</Text>
</View>
);
}
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#FAFAFA’,
padding: 8,
justifyContent: ‘center’,
alignItems: ‘center’
},
text:{
textAlign: ‘center’,
fontSize: 22
},
SpinnerText: {
color: ‘#ffff’,
}
});
|
10. Complete Source Code for App.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import React, { Component } from ‘react’;
import { View, StyleSheet, Text } from ‘react-native’;
import Spinner from ‘react-native-loading-spinner-overlay’;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false
};
}
componentDidMount() {
setInterval(() => {
this.setState({
isLoading: !this.state.isLoading,
});
}, 3000);
}
componentWillUnmount() {
this.setState({
isLoading: !this.state.isLoading,
});
}
render() {
return (
<View style={styles.MainContainer}>
<Spinner
visible={this.state.isLoading}
textContent={‘Data is Loading…’}
textStyle={styles.SpinnerText}
/>
<Text style={styles.text}>
Spinner Overlay Example Tutorial in React Native
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#FAFAFA’,
padding: 8,
justifyContent: ‘center’,
alignItems: ‘center’
},
text:{
textAlign: ‘center’,
fontSize: 22
},
SpinnerText: {
color: ‘#ffff’,
}
});
|
Screenshot in Android Device:
Screenshots in iOS device:
Also Read :
React Native Insert Data into Realm Local Database iOS Android Tutorial
React Native Timeline ListView FlatList Android iOS Component Example Tutorial
React Native Show Progress bar While Loading WebView Android iOS
Custom Material Style Star Rating Bar component in React Native iOS Android
React Native Custom Common Toast for both Android iOS App Tutorial
