This starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️
For more information, check out Why section.
cli-rnQuick start with
> 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.
- Clone the repo
> git clone https://github.com/kanzitelli/rn-starter.git App && cd App
.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
- 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.
- 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.
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
onStart– a service where you can write your own logic when app is launched. For example, you can increment number of
configureDesignSystem()– a method where all settings for an app’s design system is taking place. You can customize there colors, schemes, typegraphy, spacings, etc.
Describe app screens in one place
All setup for your screens takes place in one file