How To Build A React-Native App With React Website & Webview?

Can you build a React-Native app with a web view and React website? The answer to the question is yes; you can build the React-Native app using a web view and website. Curious to know how? If yes, then just give this content a read. Here you will go through React-Native, the steps to build, and so on. Let’s get us started with the basic:-

What is React-Native?

It is a JavaScript framework used for writing the actual interpretation of mobile applications for Android and iOS. React-Native depend on react, JavaScript library of Facebook used for developing user interfaces. However, a react targets mobile platforms instead of focusing on the browser.

In simple words, for mobile app development in Dubai, developers can write native mobile applications all from the library’s convenience. Apart from that, developers can also share the same between platforms like Android and iOS.

How to Install React-Native, React-Native-Navigation, and React-Native-Webview:

Let’s get started:

1. First, you have to install React-Native and init it. You can use the mentioned-below command to initialize the React-Native app using typescript template:

npx react-native init ReactNativeWebview –template React-Native-template-typescript

2. Next, you have to install the React-Native. Do follow the mentioned-below command for installing an app:

npm I react-native-web view

3. Lastly, install React-Native-Navigation by using the following command:

yarn add react-native-navigation

Or

npm install –save react-native-navigation

Now for linking your app with React-Native-navigation, you should use the following command:

React-Native link react-native-navigation

4. Then you need to prepare folder structure-

5. In the root of the project, you need to make a folder with “src” name

6. After that, create three folders and them “screens,” “components,” “utils” names.

7. Create two screens into the screens folder.

Inside the Initializing screen, you need to make a TSX component when the application begins accessing to know if the user logged in or not.

In utils, you have to create two files with beforeLoginLayout.ts and afterLoginLayout.ts names.

Your design of afterLoginLayout.ts looks like this:

import { screens } from “../screens/screens”;

const HomeIcon = require(“../../assets/images/bottom-tabs/home.png”);

const tabList = [

  {

    stack: {

      children: [

        {

          component: {

            id: “HomeScreenId”,

            name: screens.WebViewScreen,

            passProps: {

              tabIndex: 1,

              path: “/”,

            },

          },

        },

      ],

      options: {

        bottomTab: {

          icon: HomeIcon,

        },

        topBar: {

          visible: false,

        },

        bottomTabs: {

          visible: true,

        },

      },

    },

  },

];

export const afterLoginLayout = {

  root: {

    sideMenu: {

      center: {

        bottomTabs: {

          id: “BottomTabsId”,

          children: tabList,

          options: {

            bottomTabs: {

              currentTabIndex: tabList.length – 1,

            },

          },

        },

      },

    },

  },

};

You layout of beforeLoginLayout.ts looks like this:

import { initialScreens } from “../screens/screens”; 

export const beforeLoginLayout = {

  root: {

    stack: {

      children: [

        {

          component: {

            name: initialScreens.OnboardingScreen,

          },

        },

      ],

    },

  },

};

Then you can decide what you want to use afterLoginLayout upon or beforeLoginLayout upon to the verification situation with the React-Native-navigation function- ‘Navigation.setRoot(…)’.

Before beginning the application, you need to register your screens in RNN. So, after all imports, you can register your screens at the starting of the index.js file in the directory like below:

Object.keys(screens).forEach((value) => {

 Navigation.registerComponent(value,() => createApp(Screens[value]),() => Screens[value]);

 }); 

Describe all the screens in the object known as screens and then repeat them. You can register screens either in an array or one by one.

You should begin the app with RNN and avoid the React-Native AppRegisrty. 

You index.js file looks like this at the end:

 /**

 * @format

 */

import { AppRegistry } from “React-Native”;

import { name as appName } from “./app.json”;

import { screens } from “./src/screens/screens”;

Object.keys(screens).forEach((value) => {

  Navigation.registerComponent(

    value,

    () => createApp(Screens[value]),

    () => Screens[value]

  );

});

Navigation.events().registerAppLaunchedListener(async () => {

  Navigation.setDefaultOptions({

    layout: {

      orientation: [“portrait”],

    },

    topBar: {

      visible: false,

      drawBehind: false,

      animate: false,

      height: 0,

    },

    bottomTab: {

      icon: 0,

    },

    bottomTabs: {

      titleDisplayMode: “alwaysHide”,

      hideShadow: true,

    },

  }); 

  Navigation.setRoot({

    root: {

      component: {

        name: “InitializingScreen”,

      },

    },

  });

});

Configure Webview:

Now are you ready to develop your webview screen and arrange it? Let’s take a trip:

import React, { useState, useEffect, useRef, useCallback } from “react”;

import { Keyboard, Alert, BackHandler, SafeAreaView } from “react-native”;

import { WebView, WebViewMessageEvent } from “react-native-webview”;

import { Navigation } from “react-native-navigation”; 

import { beforeLoginLayout } from “../../utils/beforeLoginLayout”; 

interface IProps {

  componentId?: string;

  token: string;

} 

export const WebViewScreen: React.FC<IProps> = (props) => {

  const webviewRef = useRef<WebView>(null); 

  var vwuri = `${baseURLApp}${props.path}?wv=true&token=${token?.access_token}&tokenType=${token?.token_type}`; 

  return (

    <SafeAreaView style={{ flex: 1 }}>

      <WebView

        source={{

          uri: vwuri,

        }}

        javaScriptEnabled={true}

        domStorageEnabled={true}

        sharedCookiesEnabled={true}

        originWhitelist={[“*”]}

        scalesPageToFit={true}

        startInLoadingState={true}

        mixedContentMode={“always”}

        allowsInlineMediaPlayback={true}

        allowsFullscreenVideo={true}       

allowsBackForwardNavigationGestures={true}

        allowsLinkPreview={false}

        renderLoading={() => <></>}

        ref={webviewRef}

      />

    </SafeAreaView>

  );

};

Inside the return of your Functional component, you need to add a review component and component. We prepare some web view component’s options like sharedCookieEnabled according to the need of your application.

But undoubtedly, you should enable JavaScriptEnabled and pass a source to that. While loading a webpage, you need to pass that link to a source like this:

source={{uri: SOMEURL,}}

React-Native is the best choice for those mobile app developers who are familiar with JavaScript as there is no need to understand and learn iOS’s Swift or Android-specific.

For Authentication, How Can You Pass Token To Webview?

When you use the web view to open your web-app, you will see that web-app redirect you to log in repeatedly. So somehow, you need to show that web-app that you are logged in. Thinking how? We have a trick to solve this problem, and that trick is passing some query parameters while passing to the source option of webview in the URL.

For instance: 

`${baseURLApp}${props.path}?wv=true&token=${token?.access_token}&tokenType=${token?.token_type}`

At the start of the react app, you need to read this query parameter, use its token, and keep it in its storage and use. So now your web-app knows that you are logged in, and it wouldn’t transfer you to the login page.

Although having a few hiccups and loopholes, the React Native framework crosses all the hurdles. It passes tests to become the first choice for most app development companies in Dubai to develop mobile applications. A developer finds the effortlessness and quickness when developing the React-Native apps and enjoys the low workload, cost, and high efficiency during the process. Thus, many developers depend on the React-Native Framework to develop great apps that we use in our day to day life.