A cross-platform development demo. React and React Native share the common componetns and hooks in a monorepo sturcture. Aiming to reduce the workloads in web and mobile development.
I used Yarn-Workspaces to split code into multiple packages. The folder structure is as follows,
- packages/web (React.js web app)
- packages/app (React Native app)
- packages/common (common hooks and componetns)
where the packages/common has some basic React components such as Button, Text, and Theme. The common hooks include the global state and authentication context.
- Clone project
git clone https://github.com/jiin-kim109/Cross-Platform-Development-React-n-React-Native.git.
- Download dependencies
Each packages/web and packages/app has its own dependencies under /packages/web/node_modules and /packages/app/node_modules. The common dependencies will be installed in the node_modules in the root of the project. However, Yo do not need to worry about installing packages separately. By typing yarn, the yarn-workspace will do it for you.
In the root folder, type the following command,
yarn
You can modify the package installation configuration in lerna.json.
- To run the React web app
cd packages/web
yarn start
- To run the React Native mobile app
The command will open expo dev server (default=localhost:19002)
cd packages/app
expo start
//or
./appstart.sh
- To build the React web app
yarn build:web
- To build the React Native mobile app
.apk or .app-bundle for Android
yarn build:app:android
.ipa for iOS
yarn build:app:ios
- Testing
- Testing common components & controller
cd packages/controllers
yarn jest