DEV Community

loading...
Cover image for  πŸš€ Setup fully pre-configured React Native Project using react-native-app-builder NPM

πŸš€ Setup fully pre-configured React Native Project using react-native-app-builder NPM

sonalmaniya profile image Sonal Maniya ・2 min read

Do you want to know how to create react native project which is preconfigured with initial setups like authentication, theme, localization, redux, saga, and Fastlane?

This blog will help you to achieve your task in few minutes as well as enrich your understanding of the react-native project structure.

I hope you have an initial setup of react-native app development.

Quickstart

  1. npx react-native-app-builder <ProjectName>
  2. cd <ProjectName>
  3. npx react-native run-ios
  4. npx react-native run-android

What's inside

  • Latest react-native version with react hooks
  • Redux saga with persistReducer
  • Localization and Theme support (Dark / Light) Setup with React Context
  • App Button is demo for Custom Component
  • Custom font and font size for maintaining typography
  • .env setup to support different env for PRODUCTION and DEVELOPMENT
  • User Authentication flow
  • UI for Login, Tabs, and Settings
  • Fastlane setup

Directory Structure

root
β”œβ”€β”€ __tests__
β”œβ”€β”€ android
β”œβ”€β”€ ios
└── App
└── Actions
| β”œβ”€β”€ Keys
└── ApiConfig
└── AppContext
└── Localization
└── Reducers
| β”œβ”€β”€Default
└── Routes
└── Sagas
└── Screens
| CommonComponent
| Components
| SubComponents
└── Services
└── Stores
└── Theme
| Images
└── Utils
β”œβ”€β”€ fastlane
β”œβ”€β”€ .env
...

User Interface

The predefined user interfaces will look like as below...

Alt Text

Hope this npm package will helpful for your next application development.

Your comments will be helpful for me to create such content.

Start developing...

Alt Text

Discussion (0)

pic
Editor guide