This tutorial is the second part of our Previous React Native Simple WebView Tutorial. In this tutorial we would going to create a react native application with WebView component and Show Progress bar – ActivityIndicator on middle of screen just above WebView on Website loading time and hide the Progress bar after done loading WebView and show Website using renderLoading={} and startInLoadingState={} method.
Contents in this project Show Progress bar While Loading WebView in Android iOS Example Tutorial :
1. Import StyleSheet, WebView, Platform and ActivityIndicator component in your react native project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, WebView, Platform, ActivityIndicator} from ‘react-native’;
|
2. Create a function named as ActivityIndicatorLoadingView() . Inside this function we would make a ActivityIndicator component View in return block. This function would render the ActivityIndicator just middle of screen above WebView.
|
1
2
3
4
5
6
7
8
9
10
11
|
ActivityIndicatorLoadingView() {
return (
<ActivityIndicator
color=‘#009688’
size=‘large’
style={styles.ActivityIndicatorStyle}
/>
);
}
|
3. Create WebView component inside render’s return block.
renderLoading : Call the ActivityIndicatorLoadingView function which would render the ActivityIndicator .
startInLoadingState : This would allow us to start the render loading view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<WebView
style={styles.WebViewStyle}
source={{uri: ‘https://google.com’}}
javaScriptEnabled={true}
domStorageEnabled={true}
renderLoading={this.ActivityIndicatorLoadingView}
startInLoadingState={true}
/>
);
}
|
4. Create Custom CSS Style Class for WebView and ActivityIndicator.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create(
{
WebViewStyle:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
marginTop: (Platform.OS) === ‘ios’ ? 20 : 0
},
ActivityIndicatorStyle:{
position: ‘absolute’,
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: ‘center’,
justifyContent: ‘center’
}
});
|
5. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, WebView, Platform, ActivityIndicator} from ‘react-native’;
export default class MainActivity extends Component {
ActivityIndicatorLoadingView() {
return (
<ActivityIndicator
color=‘#009688’
size=‘large’
style={styles.ActivityIndicatorStyle}
/>
);
}
render() {
return (
<WebView
style={styles.WebViewStyle}
source={{uri: ‘https://google.com’}}
javaScriptEnabled={true}
domStorageEnabled={true}
renderLoading={this.ActivityIndicatorLoadingView}
startInLoadingState={true}
/>
);
}
}
const styles = StyleSheet.create(
{
WebViewStyle:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
marginTop: (Platform.OS) === ‘ios’ ? 20 : 0
},
ActivityIndicatorStyle:{
position: ‘absolute’,
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: ‘center’,
justifyContent: ‘center’
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Dynamically Change Static navigationOptions Value on Button Click iOS Android
How To Enable Disable JavaScript Code in WebView React Native
React Native Simple Modal Component iOS Android Example Tutorial
React Native Integrate Mapbox in Android iOS Example Tutorial
Create Horizontal ScrollView in React Native Tutorial Android iOS
