GoogleDoodle.in

Submit a Guest Post
Accessing WebView in Your React Native App

Accessing WebView in Your React Native App

The WebView is a feature that you can add to your app to render browser windows within the app. react native app development company can provide you with a third-party package using which you can not only add the WebView feature in your app but make it an easy few-step process. To build such an app, follow along the process I discuss in this blog.

What is Prerequisite Knowledge Required?

You only need to set up the React Native environment in your development system. For this, you have to download some software. If you are already done with this step, you can skip this segment and straight dive into the next section of the blog. However, if you are stuck with this step, check the article to learn how you can get the React Native environment set up in your system. Note that, you have to consider React Native CLI.

Creating a React Native Project: WebView

Simply follow the steps and you will get a basic WebView app. Then, we will move forward with adding components and packages.

  • Create a new folder on your system home screen. You can give it a name as ‘React Native Project’. Go to this new folder and open a command prompt from this folder.
  • Run the command npx react-native init WebView –version 0.68.1. This will create a React Native project with the name of WebView.
  • Now open the code editor from your created project and go to the App.js folder.
  • Delete all the codebases that the app.js file will hold. And then type rnfes on the same app.js on the code editor.
  • As you click on the option, it will export the React Native functional components.
  • Save the entire process.

From here, you have to start adding the components specific to Webview.

Starting With the Code Snippets

Importing Components of React Native

import {StyleSheet, Text, View} from ‘react-native’;

import React from ‘react’;

import {WebView} from ‘react-native-webview’;

 You have to add the components from the relevant package. Here, I have used Stylesheet, Text, View from react-native, React from react package, and WebView from react-native-webview.  React-native-webview is the third-party React Native plugin that I have used to get the WebView components. Refer to the above code syntax as the Javascript-based import statement. Note that you cannot use the components in the codebase unless you don’t introduce the needed components using the import statement.

Add The URI Source

const App = () => {

  return (

    <WebView

      source={{

        uri: ‘https://www.4waytechnologies.com/blog/how-to-build-react-native-android-apk-files-using-expo-cli’,

      }}

    />

  );

};

As you can notice, I started it by introducing a function App. then move forward with the return() function. Now, you have to add the component WebView under which you have to add the URL of the website you want to render in your app. In the above syntax, it is mentioned as uri. You can add any URL address.

Exporting App and Adding StyleSheet

Although I have not proceeded further with styling the app, my main aim is to make you learn how to get the WebView of a  particular website URL. However, you can start using the Stylesheet component using the following syntax. Also, you have to start with the export statement.

export default App;

const styles = StyleSheet.create({});

You can add different styling parameters to it.

Now it’s time to run the app and test the same.

Testing the App on the Emulator

Go to your project terminal in the Visual Studio Code editor and run the command npm install. This command is used to install the dependencies needed further to activate the emulator. After it is done, run the command npx react-native run-android. Wait for some time for the emulator to bundle. Once it is done and the emulator starts running, you will see the WebView as shown in image 1.

You can change the display screen by changing the uri source from the code editor. Also, you have to save the process to get the changes. As I added another uri source, I got another view on my emulator as presented in image 2.

You can do the same and get the display of different websites on your React Native app.

I hope you have understood the steps and enjoyed the process as I proceed. If you have not yet, go to the steps and create your own WebView-based React Native today.

Leave a Reply

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