RPReplay_Final1632419741.MP4


This starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️

For more information, check out Why section.

Getting Started

Quick start with cli-rn

> npx cli-rn new App -t rn

If you have any troubles running the app with yarn ios or yarn android, open XCode or Android Studio and run the project from there.

Manual setup
  1. Clone the repo

> git clone https://github.com/kanzitelli/rn-starter.git App && cd App
  1. Remove .git file (if not planning to contribute)

> rm -rf .git
  1. Install packages and pods

> yarn && yarn ios:pods
  1. Run it!

Open XCode or Android Studio to run the project (recommended) or do

> yarn ios
> yarn android

If you need to rename the app, do the following (based on react-native-rename):

> yarn rename NewAppName
> yarn ios:pods

What’s inside

  • React Navigation (v6) – routing and navigation for React Native apps. If you’d like to use React Native Navigation by Wix, check out rnn-starter.
  • RN UI lib – amazing Design System, UI toolset & components library for React Native. Dark Mode is implemented using this library.
  • Reanimated 2 – React Native’s Animated library reimplemented.
  • MobX – simple, scalable state management, with mobx-persist-store for persisting your stores.
  • AsyncStorage MMKV – efficient, small mobile key-value storage framework developed by WeChat. ~30x faster than AsyncStorage!

Extra helpful libraries

Useful services/methods

  • navigation – a service where all navigation configuration takes place in. It simplifies and abstracts the process of registering screens, layouts, etc.
  • translate – a service that brings easy integration of localization for an app by using i18n-js and react-native-localize. You can see an example of en and ru localizations in Example screen.
  • onStart – a service where you can write your own logic when app is launched. For example, you can increment number of appLaunches there.
  • configureDesignSystem() – a method where all settings for an app’s design system is taking place. You can customize there colors, schemes, typegraphy, spacings, etc.

Advantages

Describe app screens in one place

All setup for your screens takes place in one file src/screens/index.ts: