karanpratapsingh / react-native-boilerplate Goto Github PK

This project is a React Native boilerplate that provides an architecture optimized for building solid cross-platform mobile applications through separation of concerns between the UI and business logic to help you kickstart your new app

When starting new apps I found myself repeatedly setting up my project with same packages over and over again so I decided to automate this process

This boilerplate consists of various elements and best practices I learned while going though apps written by various talented developers in the React Native Community ⚡

While this mostly consists of how I organize my projects but can be easily extended to suit any workflow 😄

If you're new to React Native feel free to checkout this repo I made where I keep all the learning resources I find: Learn React Native

If you face any issue then please checkout the Known Issues section below, but if the issue persists then feel free to open a issue so we can solve it together 😃

Feel free to leave a ⭐ as motivation if this was useful to you 😄

• Content

• Project Structure

• TypeScript Support

• Using the boilerplate

• Rename the project

• Removing Redux

• Running the project

• Updates

• Known Issues

- React Native (0.62.2) + Hermes
- TypeScript Integration (Optional)
- Clean Directory Layout
- ESLint
- Packages:
    - Redux (Thunk)
    - React Navigation (Hooks)
    - React Native Reanimated
    - React Native Vector Icons
    - React Native Gesture Handler

Recently I've been using a lot of TypeScript and I think it's fantastic 😃 Addition of TypeScript to this boilerplate was a much requested feature from a lot of reddit users of r/react-native

To add TypeScript support please run yarn typescript:add command which should excecute the scripts/add-typescript/script.sh script and installs all the TypeScript dependencies with types for React, React Native, React Navigation and also add a tsconfig.json and jest.config.js

If yarn typescript:add fails then kindly apply the changes as mentioned in the docs 😓

Note: This feature is only tested on Linux and MacOSX

Make sure to remove the existing git history and initialize the project with your own

rm -rf .git/
git init
git add .
git commit -m 'project init'
git remote add origin <your remote repo>
git push -u origin master

Rename the project with the name and bundle identifier of your choosing Note: it is advised to do so in a new branch

git checkout -b rename
yarn rename <new_name> -b <bundle_identifier>

I personally like Redux for state management for larger apps but sometimes if the app is relatively smaller then I stick to using context api or simple useState or useReducer

Checkout this great light weight Redux like implementation using just the React Context api: No-Redux

If you like to use other great solutions such as MobX, RxJS then feel free to remove redux by using yarn redux:remove

Note: you will have to configure the project files accordingly 😅

Assuming you have all the requirements installed, you can setup and run the project by running:

• yarn install to install the dependencies

• use the following steps for your platform

Run the following command while the simulator is open or a device is connected via adb.

yarn android

Run the following commands to install pods and run the app on iPhone 6 simulator (device can be changed via package.json scripts)

yarn cocoapods
yarn ios

The boilerplate will follow latest React Native releases as soon as libraries and tools used here are compatible. I will personally try update this as I use this boilerplate in production 😄

Cocoapods install fails

yarn cocoapods might fail for some users, if this happens then try deleting Podlock.file and re-running the yarn cocoapods command 😄

If the error persists then please check your cocoapods version using pod --version . It should be >= 1.7.5 . If not then please run sudo gem install cocoapods 😃