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 Horizontal ProgressBar Android iOS Example Tutorial
React Native Change Progress bar Progress on ScrollView Scroll Dynamically iOS Android Example
React Native New ImageBackground Component iOS Android Example
Show Image From HTTP URL in React Native Android iOS Tutorial
React Native Align Position Button View at Bottom of Screen Example
how do I make an activity indicator where the background is transparent, and activity is showing at the centre of them.
Rohit set style as absolute read my floating action button tutorial.
this is a loader not progress bar
Mahesh in term of android this would also call as Progress bar.
Thanks so much for the article!
Welcome Soham 🙂 .
Hi,
Can you suggest any good tutorial website or YouTube channel to learn react-native development from scratch?
Sorry Mayur there is no site or channel with all the content i prefer you to learn from react native’s official website.
There is a reason why we call it a BAR in ProgressBar. This is a spinner.
Not only is it not a bar, but it doesn’t display any progress either.
Bob its a loder but works like progress bar.
loading and showing blank screen unable to open uri
Rakshith i have just checked the code and its working fine although its showing a yellow warning message about Webview has been extraced from react native.
The loader only shows itself at the time you opens the app, i wants it to be visible whenever the user navigates through the site (while loading a page)
Thanks for your question Abdul, I have to read the webView documentation again to find that we can track the each page loading. If we can track the each page loading event then surely you can show the loader on every loading.