This starter is a collection of libraries and approaches needed for fast start and productive maintainance of React Native App.
Quick start with cli-rn
npx cli-rn new App -t rnn
As
cli-rn
usesreact-native-rename
script for renaming under the hood, please refer to Rename section to apply necessary changes to Android part.
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
npx degit kanzitelli/rnn-starter app
- Install packages and pods
cd app && 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 "NewApp" -b com.yourcompany.newapp
yarn ios:pods
rename
script, it doesn't change package name and imports for files under newarchitecture
folder.
You will need do these steps manually
-
Open all
.java
files underandroid/app/src/main/java/your/bundle/newarchitecture/
folder. -
Open
MainApplication.java
. -
Find all packages and imports which contain
com.rnnstarter
and change them to yours.
- React Native Navigation - truly native navigation experience for iOS and Android.
- Expo Modules - libraries and modules from Expo ecosystem.
- RNN Screens - simplifed and predictable Navigation for React Native. Built on top of React Native Navigation.
- 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.
- Flash List - a better list for React Native (by Shopify).
- MMKV - efficient, small mobile key-value storage framework developed by WeChat. ~30x faster than AsyncStorage!
- Fast Image - performant React Native image component.
- MobX - simple, scalable state management, with mobx-persist-store for persisting your stores.
- React Native Navigation Hooks - a set of hooks for React Native Navigation.
- React Native Vector Icons - customizable icons for React Native.
- 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 some of navigation configuration takes place in (such as default options).translate
- a service that brings an easy integration of localization for an app by using i18n-js and expo-localization.api
- a service where API-related methods are located.onStart
- a service where you can write your own logic when app is launched. For example, you can increment number ofappLaunches
there.
This starter is using RN UI lib as a design system, UI toolset and a source of ready-to-go components.
configureDesignSystem()
- a method where all settings for an app's design system is taking place. You can customize colors, schemes, typegraphy, spacings, etc. Located at src/utils/designSystem.tsx
.
RPReplay_Final1641606734.MP4
All setup for your screens takes place in one file src/screens/index.ts
:
import {generateRNNScreens} from 'rnn-screens';
import {Main} from './main';
import {Settings} from './settings';
export const screens = generateRNNScreens(
{
Main: {
component: Main,
options: {
topBar: {
...withTitle('Main'),
...withRightButtons('inc', 'dec'),
},
},
},
Settings: {
component: Settings,
options: {
topBar: {...withTitle('Settings')},
},
},
// ...
},
[withGestureHandler, withStores, withServices, withAnotherProvider],
);
import {screens} from '.';
const SomeScreen = ({componentId}) => {
const {nav} = useServices();
return (
<View>
<Button
label="Open screen"
onPress={() => {
// IDE will autocomplete with registered screens
screens.push(componentId, 'AnotherScreen');
}}
/>
</View>
);
};
// single screen app
const App = () => Root(Screen(screens.get('Main')));
// tab based app
const TabsApp = () =>
Root(
BottomTabs([
Screen(screens.get('Main')),
Screen(screens.get('Playground')),
Screen(screens.get('Settings')),
]),
);
You can define modes in utils/designSystem.tsx
.
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:
- Auth flow
- 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.69.5.patch
. It will be autorun when you doyarn add/remove/etc
. - Issue after renaming on Android. This happens when you rename the app using
yarn rename
script. Check Rename section for possible solution. - Broken Dark mode. This happens if
appearance
is system and the app's appearance is toggled. This is connected to RNUILib's View component and this issue particularly.
- rnn-with-expo - 🛹 Minimalistic React Native App Starter with React Native Navigation, Expo Modules and RNN Screens.
- 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.
- rn-starter - 🦄 Production-ready starter for React Native App! Powered by cli-rn, React Navigation (v6), RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.
- "Build React Native Apps with Simplified and Predictable Navigation" - Medium, Dev.to
- "Testing React Native apps with zero effort" - Medium, Dev.to
- "Expo + React Native Navigation? Yes!" - Medium, Dev.to
...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 Native Navigation and other libraries. Check out Advantages section.
This project is MIT licensed