React Native Show Progress bar While Loading WebView Android iOS

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.

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.

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.

4. Create Custom CSS Style Class for WebView and ActivityIndicator.

5. Complete source code for App.js File :

Screenshot in Android device :

Show Progress bar

Screenshot in iOS device :

15 Comments

  1. how do I make an activity indicator where the background is transparent, and activity is showing at the centre of them.

  2. this is a loader not progress bar

  3. Thanks so much for the article!

  4. Hi,
    Can you suggest any good tutorial website or YouTube channel to learn react-native development from scratch?

  5. There is a reason why we call it a BAR in ProgressBar. This is a spinner.

  6. Not only is it not a bar, but it doesn’t display any progress either.

  7. 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.

  8. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *