Rendering a web content in native view using WebView API in react-native

Install the actual plugin


1. yarn add react-native-webview
2. npm i react-native-webview

Lets Start:

android.useAndroidX=trueandroid.enableJetifier=true

Loading URL and add buttons to navigate between them:

  • canGoBack: to go the previous web page from the navigational state. Its initial value is going to be a boolean false.
  • canGoForward: to go to the next web page in the navigational state. Its initial value is going to be a boolean false.
  • currentUrl to keep a reference of the current URL. Its initial value is going to be an empty string.
const App = () => {
const [canGoBack, setCanGoBack] = useState(false)
const [canGoForward, setCanGoForward] = useState(false)
const [currentUrl, setCurrentUrl] = useState('')

//...
}
  • Will add a ref property so we can easily get a hold of the WebView later on
  • Also add a callback for onNavigationStateChanged
<WebViewsource={{ uri: 'https://www.gitrextechnologies.com' }}startInLoadingState={true}renderLoading={() => (<ActivityIndicatorcolor='purple'size='large'style={styles.flexContainer}/>)}ref={webviewRef}onNavigationStateChange={navState => {setCanGoBack(navState.canGoBack)setCanGoForward(navState.canGoForward)setCurrentUrl(navState.url)}}javaScriptEnabled={true}/>
const webviewRef = useRef(null)
backButtonHandler = () => {
if (webviewRef.current) webviewRef.current.goBack()
}

frontButtonHandler = () => {
if (webviewRef.current) webviewRef.current.goForward()
}
<View style={styles.tabBarContainer}><TouchableOpacity onPress={backButtonHandler}><Text style={styles.button}>Back</Text></TouchableOpacity><TouchableOpacity onPress={frontButtonHandler}><Text style={styles.button}>Forward</Text></TouchableOpacity> <TouchableOpacity  onPress={()=>setOnChange(!change)}><Text style={styles.button}>Change</Text></TouchableOpacity></View>
const scripts = `document.body.style.backgroundColor = 'purple';document.querySelector("h1").style.color = 'green';document.querySelector("h4").style.color = 'green';`;
setTimeout(() => {webviewRef.current.injectJavaScript( change==true? scripts :null );}, );

App.js

import React, { useState, useRef, Component } from "react";import {SafeAreaView,StyleSheet,StatusBar,ActivityIndicator,View,TouchableOpacity,Text,} from "react-native";import WebView from "react-native-webview";const App = () => {const [canGoBack, setCanGoBack] = useState(false);const [canGoForward, setCanGoForward] = useState(false);const [currentUrl, setCurrentUrl] = useState("");const [change, setOnChange] = useState(false);const webviewRef = useRef(null);const backButtonHandler = () => {if (webviewRef.current) webviewRef.current.goBack();};const frontButtonHandler = () => {if (webviewRef.current) webviewRef.current.goForward();};const scripts = `document.body.style.backgroundColor = 'purple';document.querySelector("h1").style.color = 'green';document.querySelector("h4").style.color = 'green';`;setTimeout(() => {webviewRef.current.injectJavaScript(change == true ? scripts : null);});return (<><StatusBar barStyle="dark-content" /><SafeAreaView style={styles.flexContainer}><WebViewsource={{ uri: "https://www.gitrextechnologies.com" }}startInLoadingState={true}renderLoading={() => (<ActivityIndicatorcolor="purple"size="large"style={styles.flexContainer}/>)}ref={webviewRef}onNavigationStateChange={(navState) => {setCanGoBack(navState.canGoBack);setCanGoForward(navState.canGoForward);setCurrentUrl(navState.url);}}javaScriptEnabled={true}/><View style={styles.tabBarContainer}><TouchableOpacity onPress={backButtonHandler}><Text style={styles.button}>Back</Text></TouchableOpacity><TouchableOpacity onPress={frontButtonHandler}><Text style={styles.button}>Forward</Text></TouchableOpacity><TouchableOpacity onPress={() => setOnChange(!change)}><Text style={styles.button}>Change</Text></TouchableOpacity></View></SafeAreaView></>);};const styles = StyleSheet.create({flexContainer: {flex: 1,},tabBarContainer: {padding: 20,flexDirection: "row",justifyContent: "space-around",backgroundColor: "#000",},button: {color: "white",fontSize: 25,},});export default App;

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Custom App Development in MS Teams — Part 2, Apps in MS Teams

Data Structures in Ruby: Stack

Guide to Generics in Kotlin programming Part (II)

Email, Twitter,facebook and LinkedIn Validation in Flutter

What Is DevRel?

Month to Master

How many Todo apps does it take to get a job as a developer?

LSB Image Steganography Using Python

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Talha Gitrex

Talha Gitrex

More from Medium

How to use vector icons in React Native iOS and Android

Supporting Native Features to Expo Application using EAS Build

Using REST APIs with React Native Google-Places-Autocomplete Library (requestURL)

Fetching Data from Firestore and save it inside the Context