Skip to content

A Robust React Native boilerplate to kickstart your new app πŸ”₯

License

Notifications You must be signed in to change notification settings

sanjeevyadavIT/react-native-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

31 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Project Structure

React Native version React Navigation version StoryBook Repo size contributions welcome Last commit License

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 face any issue 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 πŸ˜„

πŸ“ͺ Index

πŸ“¦ Content:

- React Native (0.62.2)
- Clean Directory Layout
- Internationalization (i18n)
- Theme Implementation (with dark mode)
- Storybook Setup
- Packages:
    - Redux (with redux-saga)
    - React Navigation (version 5)
    - React Native Vector Icons

πŸ” Project Structure:

[WIP]

πŸš€ Getting Started:

  1. Clone the repository, by tying this command in terminal

    git clone https://github.com/alexakasanjeev/react-native-boilerplate.git && cd react-native-boilerplate

    Optional: 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
  2. Install the dependencies

    npm install && ( cd ios && pod install )

For Android

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

npx react-native run-android

For iOS

Run the following commands to install pods and run the app on iPhone simulator

cd ios && pod install && cd ..
npx react-native run-ios

πŸ“ Rename the project:

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
npx react-native-rename <new_name> -b <bundle_identifier>

✨ Run Storybook

To run Storybook follow these steps

  1. Change the value of SHOW_STORYBOOK variable in index.js from false to true

  2. Open a terminal and run storybook server

    npm run storybook
  3. In another terminal run npm start or yarn start command to view stories

πŸ“– Docs

πŸ”” Updates

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 πŸ˜„

πŸ—ƒοΈ Similar project

πŸ“£ Acknowledgements

β™₯️ Donate

If this project help you, or to help acclerate development, you can give me a cup of coffee πŸ˜„ :

Buy Me A Coffee

πŸ›‘ License

This project is under the MIT License - see the LICENSE.md file for details