Overview:

The React Native Web Monorepo is a project that allows for 100% code sharing between Web, iOS, and Android platforms. It provides a comprehensive solution for developing applications using React Native. The project utilizes a tech stack consisting of TypeScript v4, React Native v0.63, Next.js v10, and Create React App v4. It also includes Prettier and ESLint as pre-commit hooks. The project’s source code is available on GitHub and is accompanied by a tutorial.

Features:

• Code Sharing: The project enables developers to share code between Web, iOS, and Android platforms, reducing duplication of effort and allowing for efficient cross-platform development.
• Tech Stack: The project leverages a modern tech stack, including TypeScript, React Native, Next.js, and Create React App, providing developers with robust and powerful tools for application development.
• Pre-commit Hooks: Prettier and ESLint are pre-configured as pre-commit hooks, ensuring code quality and formatting consistency throughout the project.

Installation:

To install and run the React Native Web Monorepo, follow these steps:

1. Clone the repository:

   git clone git@github.com:brunolemos/react-native-web-monorepo.git
   

2. Enter the project directory:

   cd react-native-web-monorepo
   

3. Install the dependencies for the web project (Create React App):

   yarn workspace web-cra start
   

4. Start the web development server (Create React App):

   yarn workspace web-cra start
   

5. Install the dependencies for the web project (Next.js):

   yarn workspace web-nextjs dev
   

6. Start the web development server (Next.js):

   yarn workspace web-nextjs dev
   

7. For mobile development (iOS), navigate to the mobile directory and update and install the CocoaPods dependencies:

   cd packages/mobile/ios && pod update && pod install && cd -
   

8. Run the iOS app:

   yarn ios
   

9. For mobile development (Android), navigate to the mobile directory and start the Android app:

   yarn android
   

10. Run the Android app in Android Studio:

    yarn workspace mobile start
    

Summary:

The React Native Web Monorepo is a powerful solution for developing applications that can be shared across Web, iOS, and Android platforms. With its 100% code sharing capability and comprehensive tech stack, it provides developers with the tools they need for efficient cross-platform development. With the pre-configured pre-commit hooks, code quality and formatting consistency are ensured. Overall, this project is a valuable resource for developers looking to build robust and scalable applications using React Native.