React Native Boilerplate

What is React Native Boilerplate?

The boilerplate provides an architecture optimized for building solid cross-platform mobile applications through separation of concerns between the UI and business logic.

DON’T FORGET !!

If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives🌈 ☀️

React Native Boilerplate

Architecture

The driving goal of the architecture of the boilerplate is separation of concerns and using React Native at its best.

• Using modern Javascript So many javascript features are indispensable now like hooks, functional component and really cool dependencies.
• Presentational components are separated from containers.
• Presentational components are small components that are concerned with how things look. Containers usually define whole application screens and are concerned with how things work: they include presentational components and wire everything together.
• If you are interested you can read more about it here.
• State is managed using global Redux stores.
• When applications grow, sharing state and its changes can become very hard. Questions like “How can I access this data?” or “When did this change?” are common, just like passing data around components just to be able to use it in nested components.
• With Redux, state is shared using global stores, and changes are predictable: actions are applied by reducers to the state. While the pattern can be a bit much for small projects, the clear separation of responsibilities and predictability helps with bigger applications.
• If you are interested you can read more about it here.

Content

The boilerplate contains:

• a React Native (v0.63.3) application (in “ejected” mode to allow using dependencies that rely on native code)
• a clear directory layout to provide a base architecture for your application
• Redux (v4.0.5) to help manage state
• Redux Persist (v6.0.0) to persist the Redux state
• React Navigation (v5) to handle routing and navigation in the app, with a splash screen setup by default
• redux toolkit (v1.4.0) to make redux easier
• axios (v0.20.0) to make API calls
• prettier and eslint preconfigured for React Native
• react-native-flipper (v0.62.0) to debug react-native and redux-flipper (v1.3.2) to debug redux

The boilerplate includes an example (displaying fake user data,all of types navigation,deep-linking,authentication flow ,splash screen with usage Lottie animation ,multilanguage translation,dark mode,and more…) from UI components to the business logic. The example is easy to remove so that it doesn’t get in the way.

Directory layout

• src/Assets: assets (image, audio files, ...) used by the application
• src/Components: presentational components
• src/Config: configuration of the application
• src/Constants: constants of the application
• src/Helpers: helpers of the application
• src/HOC: Higher-Order Components
• src/Hooks: custom hooks
• src/Navigation: app main navigation
• src/Reducers: app reducers
• src/Routes: app routes
• src/Screens: app screens
• src/Services: application services, e.g. API clients
• src/Store: redux stores
• src/Translations: application translations
• src/Theme: base styles for the application

Using the boilerplate

To create a new project using the boilerplate simply run :

npx react-native init MyApp --template @vahesaroyan/react-native-boilerplate

After instalation you will see first page ))

Happy Coding ❤

Please follow for new updates of react-native-boilerplate.

Me always answers your questions and your requests. Just help us for growing in github.❤