Coding & Technology.

React Native Web — A Preeminent Solution

Today I am excited to introduce you to React Native-web. React Native does a fantastic job with cross-platform between iOS and Android, and now it gives support for the web. With the help of ReactDOM, we can render React Native’s code on the web as well.

React Native-web provides React Native-compatible components such as View, Text, TextInput, and scrollview, and we will use these today to create a React Native-web app — How exciting is that?

Even Jim Carrey is curious about React Native-web 😛 — A gif from GIPHY by goldenglobes

Is React Native-web stable? Many tech giants like Twitter, Uber, and Flipkart actively use it in their in-house production projects.

The origin of React Native-web

The creator, Mr. Nicolas, claims that while the progressive web app for Twitter was still being developed, it needed a compatibility layer between React Native and React Dom to manage a single code base and run natively on both the web and mobile devices. So we get “React Native-web” and “Twitter”, which we are using now.

So let’s see what benefits React Native-web brings to the platter:

• Very interactive, compatible with touch, keyboard, mouse, and inputs, among other things, on screens ranging in size from smartphones to laptops.
• An important aspect of how a product is presented is styling. React Native-web does, however, allow both Left to Right and Right to Left layouts, which can make it easier for a product to visualize content according to country, not to mention to use uniform design across all platforms.

“That’s one small step for man, one giant leap for mankind.” — Neil Armstrong.

Put your seatbelts on. Now is the moment to aim for the moon. 🚀

Installation of React Native-web

• Step 1: First, let’s install React Native to get things going.

npx react-native init AwesomeProject

React Native’s stable release when I wrote this blog post was 0.70.1.

• Step 2: Install the web dependencies, which serve as a bridge between React Native and the web platform.

npm install react-dom@18.1.0 react-native-web@0.17.7 react@18.1.0 
npm install --save-dev babel-plugin-react-native-web
                            OR 
yarn add react-dom@18.1.0 react-native-web@0.17.7 react@18.1.0
yarn add -D babel-plugin-react-native-web

• Step 3: Install webpack

The web platform’s bundler, known as webpack, wraps the code and makes it compatible with browsers.

Running environments are handled by cross-env in a project.

npm install --save-dev babel-loader url-loader webpack webpack-cli webpack-dev-server babel-plugin-react-native-web cross-env
                             OR
yarn add -D babel-loader url-loader webpack webpack-cli webpack-dev-server babel-plugin-react-native-web cross-env

• Step 4: Support Multiplatform

html-webpack-plugin dev dependency simplifies the creation of html files in webpack, which will run on the web.

npm install --save-dev html-webpack-plugin
                 OR
yarn add -D html-webpack-plugin

• Step 5: Including requirements for Babel Dev.

The below dependencies are necessary to import and have been used by the babel library, which needs to install explicitly.

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object
                            OR
yarn add -D @babel/plugin-proposal-decorators @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object

• Step 6: Add the webpack.config.js file at the project level.

The configuration for webpack, including loaders and path resolvers, will be contained in this file.

Add this file to the root folder — webpack.config.js

• Step 7: The webpack file needs to be configured; you can review the code below.

webpack.config.js

• Step 8: babel.config.js configuration is required.

babel.config.js

“You hang in there, pal, I know these steps can seem a little intimidating. The orbit has already begun to be circled by us… — May the force be with you. 🖖🏽”

• Step 9: Create a public/index.html in the root folder of a project. This file will run on the web once we are done with all the setup.

index.html

• Step 10: Add the below code to your html file.

index.html

• Step 11: Create index.web.js and index.native.js in the root folder; these files will work as the initial gateway of a project and will run as per the platform. Hence .native will run for iOS & Android, and .web will run on the web. Either you can remove the default index.js, or you can rename one of them from the above files.

Add these files to the project’s root folder.

• Step 12: Create an entry path with index.web.js and index.native.js.

index.web.js

index.native.js

• Step 13: Create an index.js file under src/.

src/index.js

• Step 14: Add the script to the package.json file; this will help to run the application in one command.

package.json

“Incoming Houston — We are ready to touchdown in T minus 5 ,4 ,3 ,2 ,1”

• Final Step: Run the application

npm run web OR yarn web

A gif from GIPHY

Congratulations 🍾 🎉 🥳 guys!! You are set to put your first React Native-web running.

Here is the deal, I have created a Todo App which includes the redux store, so you can imagine the basic workflow of real-time application concepts.

Todos App example with simple redux — UI is being inspired from the Internet.

As you can see in the above example, mainly styling and layout are responsive, and the functionality we have developed also works with web and mobile as we expected.

Conclusion

• React Native web is stable
• Simple to Debug
• Supports third-party libraries (not hardware-dependent libraries, such as those used by sensors and cameras, which require a different configuration)
• The shorter development time for all three platforms
• Codebase maintenance is simple
• It is incredibly portable to incorporate into your ongoing project