react native-tutorial

React Native WebView

Developers have the option to render any web component in a React Native application using WebViews. A web component might range from a complete website or application to a straightforward HTML file. WebViews may be easily added to your React Native projects with the package react-native-webview!

Prerequisites

I personally use Expo when developing React Native apps, so you should go ahead and install the Expo client by running this code on your machine:

npm install --global expo-cli

Apart from using Expo, I can recommend working with Visual Studio Code or something similar. Additionally, some basic knowledge in JavaScript, React/React Native, and HTML will help you follow this tutorial.

Getting started

So, first, let’s initialize our project! Go to the directory where you want to store your project. Inside this directory, run expo init my-project in order to initialize the Expo project. You can replace “my-project” with whatever name you like.

Then, change to the newly created directory with cd my-project and run expo start to start the development server. Expo lets you decide which kind of device you want to work with; the device I used in the demo and the video above is an iPhone 12 Pro Max with iOS version 14.5 installed.

But before we start our app, we still need to install the React Native WebView package. In order to do that, run the following command inside your project directory:

expo install react-native-webview

This package will work both on Android and iOS devices.

Here is a short overview of the terminal commands:

# cd into the directory where to store your project
 $ cd dir

# initialize the expo project
$ expo init my-project

# navigate inside the newly created project
$ cd my-project

# install the webview package
$ expo install react-native-webview

# run the development server
$ expo start

Creating the basic URL structure

For the sake of simplicity, we are going to add our code to the App.js file and we will not create any additional files.

The simplest way to embed a WebView into your React Native application is to provide a URL as a source to your WebView component:

App.js

import React, { Component } from 'react';
import { SafeAreaView } from "react-native";
import { WebView } from 'react-native-webview';

class MyWeb extends Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <WebView 
          source={{ uri: 'https://learncodezone.com/' }} 
        />
      </SafeAreaView>
    );
  }
}

In order to use a WebView component, you have to import it, as we did in line 4. After that, all you need to do is set the source props!

Please note that source takes an object as a value. In this case, we are providing a URI:

source={{ uri: 'https://learncodezone.com/' }} 

This code will result in something like this:

Our basic URL structure has been created.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.