Integrating Web Support into an Existing React Native Project

React Native is primarily designed for native mobile app development, but there’s a growing desire to extend its capabilities to the web. Here, we’ll delve into the process of adding React Native web support using Create React App (CRA), providing step-by-step instructions, code examples, and a clear folder structure breakdown.

Step1: Create a React-Native Project (if you don’t have an existing project):
let’s create a new react-native project. Run the below command to create a new project or follow the official documentation for project setup.

After creating a react-native project, run the project to check whether the project is properly working or not. The below command runs the project in an Android simulator or device (if properly connected).

If your app is properly working on your simulator or real device, you are good to go to the next step. The new folder structure of your project will look like the figure shown below.

Figure: New Folder Structure

Step 2: Create public/ index.html
Create a public folder inside your project directory and create an index.html file. The file will contain basic HTML code to render our React native code. Copy the below code to the index.html file and save it.

Step 2: Create src/index.js and App.js
Create a src directory inside your project. This directory will contain all the code used for the project. Create an index.js file and paste the below code in it. The file works as an entry point to the project for react-native-web.

The App.js file that was created while creating a new project should be inside the src directory. Therefore just drag the App.js file from outside or src directory to inside the directory. Then clear the welcome and write a simple message, so that it will be easy to check whether the flow is working or not. An example code of App.js is placed below.

Step 3: Install the required packages
Now, install the required package to run the react native on the web. Here you need to download, react-native-web, react-scripts, and react-dom packages

Step 4: Add Script in the package.json file
Copy the below script and paste it into the package.json file as shown in the figure below. The script helps to run the project on a web browser.

Figure: Newly added scripts

Step 5: Run react-native project for web
Run a command npm run web to run your project on your web browser. If you have done everything correctly, the browser will open on port 3000 as shown in the figure below.

Figure: React Native app on the web

I hope this blog post helped you to understand the implementation of the react-native apps on the web. We are also available on YouTube. You can also follow the video given below.

Leave a Reply

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