🦄 React Native Starter - Powered by cli-rn, React Navigation (v6), Expo Modules, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.
MIT License
This starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️
For more information, check out Why section.
> 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.
> git clone https://github.com/kanzitelli/rn-starter.git App && cd App
.git
file (if not planning to contribute)> rm -rf .git
> yarn && yarn ios:pods
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
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 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.https://user-images.githubusercontent.com/4402166/148631148-7f6e88aa-7516-4343-a812-bebc64d24102.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:
Feel free to open an issue for suggestions.
patches/react-native+0.65.1.patch
. It will be autorun when you do yarn add/remove/etc
....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