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
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