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
- Clone the repo
> git clone https://github.com/kanzitelli/rn-starter.git App && cd App
- Remove
.gitfile (if not planning to contribute)
> rm -rf .git
- Install packages and pods
> yarn && yarn ios:pods
- 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.
AsyncStorageMMKV – efficient, small mobile key-value storage framework developed by WeChat. ~30x faster than AsyncStorage!
Extra helpful libraries
- React Native Gesture Handler – native touches and gesture system for React Native.
- React Native Device Info – device information for React Native iOS and Android.
- Hermes Engine – a JavaScript engine optimized for running React Native apps.
- ESLint + Prettier – keep your code neat and structured.
- Patch Package – useful for fixing node modules instantly.
- Release It – automate versioning and publishing of your app.
- Typescript – strict syntactical superset of JavaScript.
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 ofenandrulocalizations inExamplescreen.onStart– a service where you can write your own logic when app is launched. For example, you can increment number ofappLaunchesthere.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:
