React (Web + Native) Starter Kit

For when you're looking to build 'the next big thing' for both web and native mobile.

👋 Intro

This boilerplate launches with a React web app and React Native app sharing a single code base. It shares the 'business logic' (i.e. actions, containers, reducers) across the platforms, whilst allowing flexibility in View components to ensure your project looks and feels native in each platform.

The project is super helpful to kick-start your next project, as it provides a lot of the common tools you may reach for, all ready to go. Specifically:

• A shared React and React Native structure
• Flux architecture
  • Redux
• Routing and navigation
  • React Native Router Flux for native mobile
  • React Router for web
• Data Caching / Offline
  • Redux Persist
• UI Toolkit/s
  • Native Base for native mobile
  • Bootstrap for web
• Simpler mobile app development through
  • Expo
• User authentication example through
  • Firebase
• API/Data example
  • Shows how to read/write data from/to an external API (in our case, Firebase)
• Code Linting with
  • Airbnb's JS Linting guidelines

---

🏁 Todos

• Firebase Cloud Messaging
• Firebase Database
• Replace Firebase Database with Firestore
• Firebase Authentication
• Firebase Hosting
• Firebase Storage
• In-App Messaging
• Firebase A/B Testing
• Firebase Remote Config
• Firebase Dynamic Links
• Code Splitting

📖 Docs

• Setup your own Firebase
• Understanding the file structure
• FAQs & Opinions
• Testing, Deploying & Publishing
• Tests & testing (coming soon...)
• Contributing to this project

---

🚀 Getting Started

If you're only developing for one platform you can ignore the steps below that are tagged with the platform you don't require.

1) Clone & Install Dependencies

• 1.1) git clone https://github.com/monterosa/react-native-kickstarter-kit.git
• 1.2) cd react-native-kickstarter-kit - cd into your newly created project directory.
• 1.3) Install NPM packages with your package manager of choice - i.e run yarn or npm install
• 1.4) [iOS] cd ios and run pod install - if you don't have CocoaPods you can follow these instructions to install it.
• 1.5) [Android] No additional steps for android here.

2) Rename Project

You will need to be running Node verison 7.6 or greater for the rename functionality to work

• 2.0) [iOS] cd .. to return to the root directory of the project
• 2.1) npm run rename - you'll be prompted to enter a project name and company name
• 2.2) Note down the package name value - you'll need this when setting up your Firebase project

3) Add Google Services files (plist & JSON)

• 3.1) [iOS] Follow the add firebase to your app instructions here to generate your GoogleService-Info.plist file if you haven't done so already - use the package name generated previously as your iOS bundle ID.
• 3.2) [iOS] Place this file in the ios/ directory of your project.
• 3.3) [Android] Follow the manually add firebase to your app instructions here to generate your google-services.json file if you haven't done so already - use the package name generated previously as your Android package name.
• 3.4) [Android] Place this file in the android/app/ directory of your project.

4.1. Run the React Native iOS App

# Start the React Native packager
yarn run ios

2.1. Run the React Native Android App

# Start the React Native packager
yarn run android

Instructions are shown in the terminal. You can select to open it in:

2.2. Run the Web App

# Starts are local live-reload server at:
# http://localhost:3001
yarn run web

Via webpack, starts a localhost server on port 3001 http://localhost:3001.

• Save code and it auto refreshes
• Install Redux DevTools into Chrome to see the state of Redux

💡 Inspiration

• This Github Repo

If there's any other ideas presented in this repo, that you think worth mentioning - feel free open a pull request :)