How to show loader in Webview React Native

Hi guys, In this article, we are going to learn about How to show loader in Webview React Native, by using web view we can render website data directly in our Application but sometimes due to heavy resources webview takes time to render so for that we have to show loader while rendering webview, for this we are using react-native-webview dependency in our project which supports both Android/iOS. this is example we will create another screen in which we render webview and we can reuse this screen when we want to display webview just pass the URL in params, let’s start with an example

1. Create a new project

2. Install the following dependencies

We have to add two dependencies one for navigation & another for react-native webview, for navigation we are using the latest react-navigation 5.0. To know more about react-navigation 5.0 check this article React-navigation 5.0 example. To install react-native-webview use the following command

3. Create WebViewScreen.js

We will create separate screen activity for WebViewScreen.js so that we can use this screen multiple times

In the above screen in the constructor, we will get the display URL from which is a pass from the previous screen and save it in the state variable and use this URL to display webview bypassing to source as we saw above code

4. Calling WebView screen

In this example, I am calling webViewScreen from Home.js action bar like below

5. App.js

Check my App.js where I define Screens Using NavigationContainer & createStackNavigator in react-navigation 5.0

6. Output:

 

Thank you 🙂

Leave a Reply

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