Repository files navigation

This project is aReact Native boilerplate template powered by NativeBase, ReactNavigation, ReduxToolkit and TypeScript that can be used to kickstart a mobile application. The boilerplate providesan optimized architecture for building solid cross-platform mobile applications through separation of concerns between the UI and business logic. Live preview onGoogle 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 thePoppins 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;

• InstallReact Native Debugger and open before running the app
• Installeslint andprettier plugins into your IDE (you can adjust settings in .eslintrc.js and .prettierrc.js)
• Ensure your machine has theReact 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 installcd ios&& pod install# for iOS

And test your new application:

npm run android# for Android devices or Android Simulatornpm run ios# for iOS devices or iOS Simulator