Share Code Between React Native and React JS
How To Share Code Between React Native And React JS
2023 Important update:
The recommended way to share code between React and React Native
To efficiently share code, logic, hooks, props, types and even design tokens between React and React Native it is recommended to use Bit.
It will let you smoothly share code, and keep both your user experience and developer experience consistent across platforms.
Try it:
Learn more about building and sharing reusable React Native components:
React Native is a popular choice for web and mobile apps, being a framework for creating native apps using JavaScript. It compiles to the native app components, which make creating native mobile apps possible. On the other hand, Facebook created React JS to address its need for a User Interface that’s not only high-performing but dynamic as well.
Referred often as React, React JS is a library of JavaScript that’s responsible for building a UI components hierarchy. In other words, it’s responsible for rendering User Interface components. React provides support for the server-side and frontend. Today, React development services are in demand as more and more organizations are considering software solutions that are crafted from the framework.
React Native and React JS
After being around for a few years now, React Native has indeed become an interesting framework since it could be used for Android, as well as enables building cross-platform mobile apps. There are of course differences that you need to know before you attempt to share code between the two platforms.
React Native is a framework, while React JS is a library of JavaScript that could be used for your site. React Native comes with everything that you could need and probably there would be nothing that you need more. React JS could be used for building a high-performing User Interface layer.
The heart of React Native is React JS, and it embodies all the syntax and principles of React, thus the learning curve is easy. There are of course technical differences between the two. The browser code in React is rendered through a Virtual DOM. React Native on the other hand uses native APIs to render components on mobile.
In React Native, you must be familiar with the React Native syntax, while React utilizes HTML Moreover, React Native does not use CCS, meaning that you would have to utilize the animated API that comes with React Native for animating the various app components.
The bottom line is that React is the ideal choice for creating high performing, dynamic, responsive UI for web interfaces. On the other hand, React Native is intended to provide a truly native feel on mobile apps.
Why Share Code?
With the demand for React Native apps, a React Native developer gains a competitive edge in the IT industry. Why the preference for React Native? Because it provides several advantages.
One of the advantages when using React Native is to share code across different devices. This is possible because React Native under the hood utilizes the same component which is used on the web. Normally, projects fall into an instance when they should create a platform that is reusable in React JS, for both React Native mobile apps and the website.
The question of sharing code as a matter of fact between React Native and React JS is one of the hot topics among a React development company and React developers globally. It was the logical choice for the web with React Native on mobiles. This enables a React native app development company to have a single team on the project working on a single-page app, and a mobile app as well.
Both React Native and React enable a learn-once-write-anywhere paradigm. Since one tech team could create both your native mobile and web app experience, this is indeed great. The problem however is that developers hate writing things twice.
There have been several efforts to create a unifying technology to write an app once and have it work on native and the web. Still, this is not the best approach all the time. There is value in sharing only our state and business logic; keeping separate your render code.
The Concept, an Explanation
Let’s go to the concept first. React Native could load files on the current platform basis. We need to index files as index.ios.html and index.android.html for instance.
The index.ios.html would be picked up automatically by React Native when an app is running on an iOS device, and when it runs on Android, it’s the index.android.html. It also has native extensions, besides the extensions of both, which could be used when a module needs to be shared between them.
Consider a couple of separate button views in the app and the web. We’ll make two various files with the extensions below:
button.js (a view of the React button)
button.native.js (a view of the React Native button)
I shared a container component that imports view, such as
The webpack or any other web bundler will now automatically pick the button.js while making a bundle whereas the button.native.js would be picked by React Native while creating a bundle.
All components can be shared from their app’s repository to a component collection, using Bit (Github). Each component can later be modified or installed separately.
Moreover, when using hooks as reusable logic, the same logic can be used for ReactJS and React Native apps (by sharing these hooks using Bit)
App Demo
We crafted a POC around it and created a page in the web and app that’s made up of both smart and dumb components. You could find the source code GitHub. We made a seamless page in which you can, for instance, take all your frustration on Thanos by hitting him hard. The structure of the folder would look like this.
Mainly, the page consisted of a header, the main content, and the footer. All the components that should be shared among the web and app are stored under the platform folder. Two components currently, namely ThanosHitButton and ThanosCaption are in the folder.
The latter is a Redux component while the former one is a dumb component. Redux additionally is shared between React JS and React Native. On your mobile, you could run React Native if you download the Expo app.
This is how the app will look like in the app and the web:
No-logic Component
There is a Thanos caption folder within the platform folder.
Inside the folder are these:
1. thanosCaptionView.js. Contains the Thanos caption view for the web.
2. thanosCaptionContainerComponent.js. A container component internally imports the platform view that we run code on.
3. thanosCaptionView.native.js. It has the Thanos caption view of the app.
Let’s now check out what’s within the container component
Now let us look inside the ‘thanosCaptionConatinerComponent.js’ container component.
The component seamlessly imports the ThanosCaptionView. Keep in mind that we’re importing from a file that has not specified extension. The right extension would be picked up while making the bundle through react native and webpack.
A bundle that is made up of webpack means that it’s prepared for the web. The ThanosCaptionView would then be automatically picked from the thanosCaptionView.js. On the other hand, if it’s being made by React Native/Expo, it means that it’s being prepared for mobile application, and ThanosCaptionView then from the thanosCaptionView.native.js would be automatically picked.
Let’s take a quick look at the two views.
ThanosCaptionView.native.js
The view you see on top is what would be rendered for a mobile application. Simply, it renders Thano’s image.
ThanosCaptionView.js
This is the view to be rendered for the web.
A Logical Component
Let’s go now to the other component, the thanosHitButton, which is within the platform folder.
We again have three various files under this folder.
hitButtonView.js. Contains the web view.
hitButtonView.native.js. Contains the app view.
hitButtonContainer.Component.js. It contains the logic, as well as imports view based on the platform where we internally run code on.
Before we visit the container component, let’s check out where the actions and reducers for the component and how the store is initialized in both platforms. All the reducers and common actions are at the folder root shred among mobile and web apps.
The action thus that hitButtonContainerComponent.js dispatches sits beneath the actions folder that’s at the root of the project. For initializing the store for mobile and web app, we have the same code, which is at the root of the initialzeStore.js project. Below is a code snippet inside that file.
Index.web.js and App.js now, which is respectively the entry point for web and entry point for the app, call the function the get the store in their respective platforms. Let’s look at both the files.
The Index.web.js file
The App.js file
Let’s now see within the hitButtonContainerComponent.js
As we see, the action for storing is written in the container component as the Logic to boost the Hit Count and dispatch action. The logic thus and the Redux become common in both React Native and React JS.
Simply, the component imports HitButton. It’s important to keep in mind that we are importing views from a file that is without extension. The correct extension will be picked up while at the same time building a bundle through a webpack and react native.
Let’s check out the views.
hitButtonView.js
The view above would be rendered for the web. The button that calls the handler would be rendered by the component, passed by the container when the button is clicked by a user.
hitButtonView.native.js
This is the view rendered for the App. It will render the button that calls the handler that’s passed through a container when a button is clicked on by a user.
That’s it for React JS and React Native code sharing.
To Conclude
We’ve analyzed how it is to be sharing code between React Native and React with various components. In truth, the technique is simple and very effective.
