This starter is a collection of libraries and approaches needed for fast start and productive maintainance of React Native (Expo) App.
Expo Starteris a part of starters.dev collection.
If
Expo Starterhelped you in any way, don't hesitate to ⭐️ the repo!
Quick start with cli-rn
npx cli-rn new appIn order to change app's name, please make necessary changes in app.json.
Manual setup
- Clone the repo
npx degit kanzitelli/expo-starter app- Install packages
cd app && yarn- Run it!
yarn start- Expo SDK - a set of tools and services built around React Native and native platforms.
- React Navigation (v6) - routing and navigation for React Native apps.
- Navio - universal navigation library for React Native. Built on top of React 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.
- React Native Gesture Handler - native touches and gesture system for React Native.
- MobX - simple, scalable state management, with mobx-persist-store for persisting your stores.
- Flash List - a better list for React Native (by Shopify).
- Expo Image - cross-platform React component that loads and renders images.
In order to use them, you will need to run yarn prebuild command to generate ios/ and android/ folders with native code.
- MMKV - efficient, small mobile key-value storage framework developed by WeChat. ~30x faster than AsyncStorage! Available only within Expo dev clients. Instructions on installation could be found here.
navio- a service that exposes all navigation methods of Navio instance.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 ofappLaunchesthere.
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.
video.MP4
Build app layout in one place with Navio
All setup for your screens, tabs and modals take place in one file src/screens/index.ts.
import {Navio} from 'rn-navio';
// importing screen components
import {Main} from '@app/screens/main';
import {Playground} from '@app/screens/playground';
import {Settings} from '@app/screens/settings';
import {Example} from '@app/screens/_screen-sample';
// building layout
export const navio = Navio.build({
screens: {
Main,
Settings,
Example,
Playground: {
component: Playground,
options: () => ({
title: 'Playground',
}),
},
},
stacks: {
MainStack: ['Main', 'Example'],
ExampleStack: {
screens: ['Example'],
navigatorProps: {
screenListeners: {
focus: () => {},
},
},
},
},
tabs: {
AppTabs: {
layout: {
MainTab: {
stack: 'MainStack',
options: () => ({
title: 'Main',
tabBarIcon: getTabBarIcon('MainTab'),
}),
},
PlaygroundTab: {
stack: ['Playground'],
options: () => ({
title: 'Playground',
tabBarIcon: getTabBarIcon('PlaygroundTab'),
}),
},
SettingsTab: {
stack: ['Settings'],
options: () => ({
title: services.t.do('settings.title'),
tabBarIcon: getTabBarIcon('SettingsTab'),
}),
},
},
},
},
modals: {
ExampleModal: {stack: 'ExampleStack'},
},
drawers: {
MainDrawer: {
layout: {
Main: 'MainStack',
Example: 'ExampleStack',
Playground: ['Playground'],
},
},
},
root: 'AppTabs',
});
export const NavioApp = navio.App;export const Screen = () => {
const {navio} = useServices();
return (
<View>
<Button
label="Push Settings"
onPress={() => {
// Typescript and IDE will help with autocompletion
navio.push('Settings');
}}
/>
</View>
);
};You can find different app flows, such as Auth flow, simple 2 screens, 3 tabs, etc., in the navio.tsx.
You can define modes in 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 example
- Navigation library to reduce boilerplate code.
- Expo Image added.
- Shared transitions (w/ Reanimated v3)
Feel free to open an issue for suggestions.
- rnn-starter - 🤹 Production-ready starter for React Native App! Powered by cli-rn, React Native Navigation, RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, 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.
Icons have been generated with BuildIcon created by Evan Bacon.
- "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 4 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.
This project is MIT licensed
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent