I have done a single code based package for a ReactJS and React-Native. I can tell you my solution and experience with this.
UI
Both frameworks use the same syntax to describe the UI (JSX). If you go into more detail you will see that there are several differences:
- ReactJS:
<div/>
- React-Native:
<View/>
That means there will be always a "framework-specific" part in your application/architecture. To minimize the specific code to only the differences you can use JSX to provide props to components like styles, data, or event functions.
Functionality
React-Native uses/contains the ReactJS framework and all runs in a JavaScript virtual machine. So for "non native/ui functionality" you can use good old JavaScript written functionalities or packages provided (e.g. via npm) functionalities across both apps (ReactJS && React-Native)
How to use one code for both apps
Now we now functionality is no problem. But how to get across the UI specifics. My solution was to write some kind of pseudo code for framework specific components:
- For each framework write a pseudo class wich stands for your
component. The following example shows some class rejecting to RN
View class:
My implementation of a very simple View component on ReactJS side
import React, { Component } from 'react';
class View_Wrapper extends Component {
render() {
return (
<div style={this.props.style}>
{this.props.children}
</div>
);
}
}
export default View_Wrapper;
My implementation of a very simple View component on React-Native side
import React, { Component } from 'react';
import { View } from 'react-native';
class View_Wrapper extends Component {
render() {
return (
<View style={this.props.style}>
{this.props.children}
</View>
);
}
}
export default View_Wrapper;
- Create a own project for your shared-code (Create project) and provide your written View components to it. That means you import your shared-code in your React or React-Native project and give the shared-code project your framework-specific components.
My implementation of a class inside my shared-code project wich holds the view for me. In this code you can reuse the View component and write your UI with this component. That means in React there would be a div against what React-Native would contain a View
let View = undefined;
const registerView = (View) => {
UIProvider.View = View
};
const getView = () => {
return UIProvider.View;
};
let UIProvider = {
View: View
};
//Functions for component registration
UIProvider.registerView = registerView;
//Functions to receive shared components
UIProvider.getView = getView;
export {UIProvider};
Problems i got through this way
Key to use the components is to break everything down to blank JavaScript and use this in your React or React-Native projects. Maybe its owing through my missing experience in webpack but i got lots of trouble with this. They were cause because if you build up a React app with create-react-app the webpack config is done for you and it's not that easy to break things up to the level they want.
Another point is you should use High-Order-Components to use your components in your shared-code package/library or whatever. If you are new to it it can be confusing at the beginning but gives you a big value if you use and understand it.
Furthermore reading
