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
react-native init ProjectName
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
npm install --save react-native-webview
3. Create WebViewScreen.js
We will create separate screen activity for WebViewScreen.js so that we can use this screen multiple times
import React, { Component } from "react"; import { ActivityIndicator, StyleSheet } from "react-native"; import { WebView } from "react-native-webview"; export default class WebViewScreen extends Component { constructor(props) { super(props); console.log(props.route.params); this.state = { bodayText: "", url: props.route.params.url }; } IndicatorLoadingView() { return ( <ActivityIndicator color="#3235fd" size="large" style={styles.IndicatorStyle} /> ); } render() { return ( <WebView source={{ uri: this.state.url }} javaScriptEnabled={true} domStorageEnabled={true} renderLoading={this.IndicatorLoadingView} startInLoadingState={true} /> ); } } const styles = StyleSheet.create({ IndicatorStyle: { position: "absolute", alignItems: "center", justifyContent: "center", left: 0, right: 0, top: 0, bottom: 0 } });
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
const { navigation } = props; React.useLayoutEffect(() => { navigation.setOptions({ headerRight: () => ( <TouchableOpacity onPress={() => navigation.navigate("WebViewScreen", { //<--- Call WebViewScreen and Pass URL url: "https://techup.co.in" }) } > <Text style={{ color: "#FFFFFF", paddingHorizontal: 15 }}> Open WebView screen </Text> </TouchableOpacity> ) }); }, [navigation]);
5. App.js
Check my App.js where I define Screens Using NavigationContainer & createStackNavigator in react-navigation 5.0
import * as React from "react"; import { Text, View, Button } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import Home from "../screens/Home"; import WebViewScreen from "../screens/WebViewScreen"; const Stack = createStackNavigator(); function MainStackNavigator() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home" screenOptions={{ gestureEnabled: true, headerStyle: { backgroundColor: "#3e78f4" }, headerTitleStyle: { fontWeight: "bold" }, headerTintColor: "#FFFFFF" }} > <Stack.Screen name="Home" component={Home} options={{ title: "Home Screen" }} /> <Stack.Screen name="WebViewScreen" component={WebViewScreen} options={{ title: "React-native WebView" }} /> </Stack.Navigator> </NavigationContainer> ); } export default MainStackNavigator;
6. Output:
Thank you 🙂