rnbnr-template

RNBNR Starter Kit

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

Features

This template consists of four screens and three components showing the interaction between used libraries and offers a predefined project structure.

Views

• 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;

Dependencies

• 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)

Structure

• 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;

Installation

• Install React Native Debugger and open before running the app
• Install eslint and prettier 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