Can we share code between react webapp and react native app and is react-native production ready

Question

We have a stable version of a widget developed with reactjs. We would like to develop mobile version of the same. Is it better to develop with react native and share the code ac

Answer 1

You cannot just use your whole code into the react-native application. First and foremost, you have to follow the react-native architecture and then develop your UI using react-native components.

You’ll certainly have to write your components separately for a mobile app and web app. But you can always reuse the business logic, API Communication layer.

Create the reusable component and share it in the Shared folder and reuse Mobile/Web anywhere.

Convert react to the react-native platform is an easy process. A step by step process how to reuse code in react native explain in the image with react native web view as an introduced bride as react-hooks

Step by step guide how to do React vs React Native reusability & what percentage of reusability that we can achieve between react and react native code will explain in the below part.

Sharable code between React & React Native:

• Business Logc
• Communication with API
• Stores, Reducers, Actions and Services
• Helpers, Constants, Storage Services
• HOCs (Higher-Order Components)
• Mobile / Web specific:

Dedicated code (specific code) for Mobile & Web separately

• Presentational components
• Navigation / routing
• Styles

Setting up a shared project

Make sure you are at the project root folder

$ mkdir -p packages/components/src packages/mobile packages/web

Create react native project using react-native-cli inside 'packages/mobile`

Create react app using create-react-app inside packages/web

Create package.json at the root directory to enable Yarn Workspaces

Create a shared folder

Now create a common or shared folder where the common code of react and react native will exist.

$ mkdir -p packages/common

Create package.json file in common folder

Name the package and add main(entry file)

Configure React Web application

Add react-app-rewire-yarn-workspaces and react-app-rewired in dev dependencies in your web/package.json

Change your scripts from react-scripts to react-app-rewired

"start": "react-app-rewired start"

"build": "react-app-rewired build"

"test": "react-app-rewired test --env=jsdom"

"eject": "react-app-rewired eject"

Add config-overrides.js inside web

Configure React Native Mobile application

Configuring react-native on mono repo is a little bit tricky part. We need to understand two things before making workspaces work in our react native app.

• Symlinking
• No Hoist

Symlinking

symlink is a term for any file that contains a reference to another file or packages. To achieve symlinking we will use wml.

And finally

Create the reusable component and share in the Shared folder and reuse Mobile/Web anywhere.

Migrating from Web (React) to Mobile(React Native) or Mobile (React Native) to the Web (React)

Depends on the following key points

• Followed Coding Guideline Standard
• Modularised development
• Component-based development
• Segregation of sharable code
• and code design for both (Web or Mobile) or not like the example Image

Here I tried for a simple explanation about how to share code between React and react-native with react-native-web. I'll add a detailed process (step by step) guide for convert react native app to web as well here in the coming days.

Migration from React to React Native

Conclusion - based on my understanding and depends on the above points, I can say that you can reuse from 20-50% of React JS code to React Native platform

From Scratch Development

Conclusion - based on my understanding and depends on the above points, I can say that you can reuse from 50-70% of React JS code to React Native platform

References website - Codingular

References website - Jkaufman