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

Two popular options addressing code share across web, iOS, Android & Windows are

1. React Native Web - https://github.com/necolas/react-native-web
2. ReactXP - https://github.com/microsoft/reactxp

Below is an excellent excerpt from https://microsoft.github.io/reactxp/docs/faq.html highlighting the difference.

How does ReactXP differ from React Native for Web?

React Native for Web is an open-sourced library developed by engineers at Twitter. We started implementing ReactXP before React Native for Web was available.

The goals behind these two efforts are similar, but the approaches differ. ReactXP is a layer that sits on top of React Native and React, whereas React Native for Web is a parallel implementation of React Native — a sibling to React Native for iOS and Android.

ReactXP generally exposes only those props, style attributes, and APIs that are available across all platforms. If you write to ReactXP’s abstraction, you can have high confidence that it will run on all supported platforms in the same manner. The same can be achieved with React Native for Web/iOS/Android, but you need to be more careful about which components, props, and APIs you use.

Answer 2

Rather than bloat this answer too much, I wrote a fairly in-depth guide about this at https://dev.to/kylessg/a-sensible-approach-to-cross-platform-development-with-react-and-react-native-57pk.

To summarise though, you can get great amounts of codesharing between React and React Native but don't overreach on what you're sharing. Doing so may leave your code harder to maintain where you're trying to oversimplify valid differences between mobile and web.

For myself, this is along the lines of:

Shared:

• Business logic
• Communication with API
• Polyfill possible shared functionality into an API (e.g. communication with analytics, local storage, network detection etc)
• Stores, reducers app actions
• HOCs

Web/Mobile specific:

• Presentational components
• Navigation / routing
• Styles

Answer 3

Yes we can reuse the code. And it works really well. Here is a sample application repository https://github.com/spoman007/reactXstarter

Answer 4

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