This project is a React Native boilerplate template powered by NativeBase, ReactNavigation, ReduxToolkit and TypeScript that can be used to kickstart a mobile application. The boilerplate provides an optimized architecture for building solid cross-platform mobile applications through separation of concerns between the UI and business logic. Live preview on Google Play.
Inspiration: https://github.com/mcnamee/react-native-starter-kit
This template consists of four screens and three components showing the interaction between used libraries and offers a predefined project structure.
- Screens
- Cards.tsx - Demonstrates the use of a grid, images embedded in the application and a component constructed from a large number of props;
- Forms.tsx - Demonstrates integration between NativeBase UI, Formik form controller, Yup validator and RTK store;
- Gallery.tsx - Demonstrates the use of local state, remote images and gallery implementation;
- Session.tsx - Demonstrates access to user files and basic CRUD operations on store;
- Components
- AppBar.tsx - Demonstrates basic examples of use of reducers and preservation of application data in offline mode;
- Card.tsx - Demonstrates reuse of a component by using props;
- Modal.tsx - Demonstrates reuse of a component by using store;
- Mandatory
- React v18 - base library;
- React Native v0.70 - base library;
- Native Base v3.4 - user interface toolkit;
- React Navigation v6 - routing and navigation;
- Redux Toolkit v1.9 - flux architecture;
- Optional
- Formik v2.2 - advanced form controller
- YUP v0.32 - validation schema builder
- React Native Document Picker v8.1 - interface to access documents;
- React Native Image Viewing v0.2.2 - gallery plugin;
- React Native Vector Icons v9.2 - additional icons from Feather, FontAwesome, etc;
- Development
- TypeScript v4.9 - extends javascript by adding types to the language
- Prettier v2.8 - code formatter
- ESLint v7.32 - code linter (config extends @react-native-community/eslint-config rules)
- src
- assets - static assets such as videos, fonts, images, etc;
- components - custom components for use in screens;
- ...
- Component.tsx
- screens - finished screens, i.e. views for your application;
- ...
- Screen.tsx
- slices - business logic implemented using Redux reducers;
- ...
- Slice.tsx
- Theme.tsx - global theme parameters, as an example this application uses the Poppins font;
- Store.tsx - state container which holds the application's global state;
- Types.tsx - custom types and interfaces;
- App.tsx - handles your app startup and routing;
- Install React Native Debugger and open before running the app
- Install
eslint
andprettier
plugins into your IDE (you can adjust settings in .eslintrc.js and .prettierrc.js) - Ensure your machine has the React Native dependencies installed
To create a new project using the boilerplate simply run:
npx react-native init MyApp --template rnbnr-template
Than install dependencies:
npm install
cd ios && pod install # for iOS
And test your new application:
npm run android # for Android devices or Android Simulator
npm run ios # for iOS devices or iOS Simulator