More Premium Hugo Themes Premium React Themes

React And React Native Monorepo

React and React Native monorepo with navigation and redux out-of-box.

React And React Native Monorepo

React and React Native monorepo with navigation and redux out-of-box.

Author Avatar Theme by faisal-manzer
Github Stars Github Stars: 6
Last Commit Last Commit: Jun 15, 2020 -
First Commit Created: Jun 19, 2023 -
React And React Native Monorepo screenshot

Overview:

The React & React Native Monorepo is a boilerplate that provides a convenient setup for developing React and React Native applications. It comes with preconfigured tools and configurations for both web and native platforms. The monorepo structure allows for code sharing between the two platforms, making development more efficient.

Features:

  • Create React App: Uses an integrated toolchain for the best user and developer experience on the web.
  • @reach/router: A small and simple router for web applications.
  • react-app-rewired: Allows for tweaking the Create React App webpack config without using ’eject'.
  • react-native: Allows for creating native apps for Android and iOS using React.
  • react-native-splash-screen: Provides a splash screen API for react-native that can programmatically hide and show the splash screen on both iOS and Android.
  • @react-navigation/native: A navigation framework for react-native.
  • @react-navigation/stack: Stack-navigation for @react-navigation/native.
  • redux: A predictable state container for JavaScript apps.
  • react-redux: Official React bindings for Redux.
  • redux-thunk: Async action middleware for Redux.
  • eslint and prettier: Help find and fix problems in JavaScript code.
  • husky and lint-staged: Beautify code (staged) before every commit.
  • Absolute imports for react and react-native: Easy and convenient import statements for React and React Native code.

Installation:

To install the React & React Native Monorepo, follow these steps:

  1. Run yarn install to install the dependencies.
  2. If you are planning to develop for iOS, make sure you have Xcode and Cocoapods installed. Run yarn pods to install the iOS dependencies.
  3. To delete all the node_modules and pods, run yarn clean. This will prepare the app for a fresh install.
  4. Use yarn start to start the Create React App’s development server and the React Native bundler.
  5. Alternatively, you can use yarn native to manually start the metro server for React Native, or yarn web to manually start the Create React App’s development server (note: the server is already started if you ran yarn start).
  6. Use yarn android to run the app on an Android emulator or device.
  7. Use yarn ios to run the app on an iOS simulator.
  8. You can also use yarn studio to open the Android project in Android Studio, or yarn xcode to open the iOS project in Xcode.

Summary:

The React & React Native Monorepo provides a convenient and preconfigured setup for developing React and React Native applications. It allows for code sharing between the two platforms, reducing development time and effort. The monorepo comes with all the necessary tools and configurations for both web and native platforms, making it easier for developers to get started with their projects.