This starter is a collection of libraries and approaches from my personal experience. No hard judgements βοΈ
For more information, check out Why section.
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
.git
file (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.
- Expo Modules - libraries and modules from Expo ecosystem.
- 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!
- React Native Gesture Handler - native touches and gesture system for React Native.
- 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.
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 an easy integration of localization for an app by using i18n-js and expo-localization. You can see an example ofen
andru
localizations inExample
screen.onStart
- a service where you can write your own logic when app is launched. For example, you can increment number ofappLaunches
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.
RPReplay_Final1641615508.MP4
All setup for your screens takes place in one file src/screens/index.ts
:
type Screen = 'Main' | 'Example' | 'Settings';
type Tabs = 'Main' | 'WIP' | 'Settings';
const screens: ScreenLayouts = {
Main: {
name: 'Main',
component: Main,
options: () => ({
title: 'Home',
}),
},
// ...
}
const tabs: TabScreenLayouts = {
Main: {
name: 'MainNavigator',
component: HomeStack,
options: () => ({
title: 'Home',
}),
},
// ...
}
Stack Navigator:
const HomeStack = () =>
genStackNavigator([
screens.Main,
screens.Example,
]);
Tab Navigator:
const TabNavigator = () =>
genTabNavigator([
tabs.Main,
tabs.WIP,
tabs.Settings,
]);
const Screen = ({componentId}) => {
const {nav} = useServices();
return (
<View>
<Button
label="Open Settings"
onPress={() => nav.push('Settings')}
/>
</View>
)
}
So you have one structure within the project. You can find them in corresponding folders. Just copy&paste it and make the necessary changes.
There are still some things I would like to add to the starter:
- Passing props to a screen example
- Constants: add Dimensions
- MMKV (AsyncStorage) stores persisting example
- Shared transitions β IjzerenHein/react-navigation-shared-element
- Auth flow
- Fast Image β DylanVann/react-native-fast-image
- Notifications β wix/react-native-notifications or/and invertase/notifee
- E2E tests β wix/Detox
- Permissions β zoontek/react-native-permissions
- FB SDK β thebergamo/react-native-fbsdk-next
- Appodeal β appodeal/react-native-appodeal
- In-app purchases β dooboolab/react-native-iap?
Feel free to open an issue for suggestions.
- Large title is not shown on 2nd+ tab. This issue exists. So you can find the patch file for fixing that in
patches/react-native+0.65.1.patch
. It will be autorun when you doyarn add/remove/etc
. - Over-The-Air Updates. They have been removed from the current version as I had some problems publishing one of the apps to AppStore. Check out my tweet and be aware of the issue if you'd like to use them anyways.
- expo-starter - π¦₯ Production-ready starter for Expo (React Native) App! Powered by cli-rn, React Navigation (v6), RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, and much more.
- rnn-starter - π€Ή Production-ready starter for your next React Native App! Powered by cli-rn, React Native Navigation, RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.
- Expo + React Native Navigation? Yes! - Medium, Dev.to
- cli-rn β making RN app developing experience as smooth as possible - Medium, Dev.to
- Wallpapers App - Twitter, App Store soon
- Rabbit App. Lite Reddit client - Github, App Store, Google Play
- Trip Music Radio - App Store, Google Play
- App for VK - App Store
- Messenger for VK - App Store
- Christmas Market - App Store
...do we need yet another starter/boilerplate? Well, I work with React Native for more than 3 years and during the time I started having my own project structure which was a good fit for almost all of the delivered apps. Also, I have come up with some custom useful services/methods which simplify usage of React Navigation and other libraries. Check out Advantages section. If you'd like to use React Native Navigation by Wix, check out rnn-starter.
This project is MIT licensed