Show Web Pages inside React Native App

Published On: 2024-02-25

Posted By: Harish

Webview is a type of view which has the capability to show websites or web pages inside a react native app. For example, this type of view can be useful to show a bank's OTP page to enter received OTP.

In this post, we will see a way to show web pages inside the app's view.

Create A New Project

Create a new react-native project by using npx. Check documentation for creating a new react native project.

npx react-native@latest init WebviewRN

Install react-native-webview package

WebView used to be a component in react-native, but it was deprecated. Now we can use the react-native-webview community maintained package to show a webpage inside an app.

Install react-native-webview package. This package is compatible for iOS, Android, Windows and macOS apps.

#npm
npm i react-native-webview

#yarn
yarn add react-native-webview

After installation, go to the iOS folder and pod install to install this package for iOS. For android, dependencies get auto installed.

# iOS 
cd ios
pod install

Installation is completed, now to show a url inside react native app, import WebView from react-native-webview and add the WebView component with a source url.

//app.tsx
import WebView from "react-native-webview";

...

<WebView
  source={{ uri: 'https://ifelsething.com/' }}
  style={{ flex: 1 }}
/>

If we run the app, the source url page or site will be loaded inside the view.

#for Android
npx react-native run-android

#for ios
npx react-native run-ios

Complete code,

//app.tsx
import {
  View,
  Text,
  StyleSheet
} from "react-native";
import WebView from "react-native-webview";

export const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        ifelsething.com
      </Text>
      <Text style={styles.text}>
        Show web pages inside react native app
      </Text>
      <WebView
        source={{ uri: 'https://ifelsething.com/' }}
        style={{ flex: 1 }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
    gap: 20,
  },
  text: {
    fontSize: 15,
    color: 'black',
    fontStyle: 'italic'
  }
});

Share is Caring

Create A New Project

Install react-native-webview package

Related Posts