Alexandre-io/expo-starter

This starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️

For more information, check out Why section.

Getting Started

Quick start with cli-rn

> npx cli-rn new App

In order to change app's name, please make necessary changes in app.json.

See it with Expo Web or Expo Go.

Manual setup

Clone the repo

> git clone https://github.com/kanzitelli/expo-starter.git App && cd App

Remove .git file (if not planning to contribute)

> rm -rf .git

Install packages

> yarn

Run it!

> yarn start

What's inside

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.
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.
~~AsyncStorage~~ 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.

Extra helpful libraries

React Native Gesture Handler - native touches and gesture system for React Native.
ESLint + Prettier - keep your code neat and structured.
Release It - automate versioning and publishing of your app.
Typescript - strict syntactical superset of JavaScript.

Useful services/methods

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 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.

RPReplay_Final1632940736.MP4

Advantages

Ready-to-use Expo Config Plugins

It gives us ability to build custom dev clients for iOS and Android with pre-installed react-native-mmvk and other libraries.

You can find available plugins under ./plugins folders.

Links to the docs: Expo Dev Clients and Expo Config Plugins.

Instructions for react-native-mmkv

Install react-native-mmkv (compatible version - 1.3.2):

> yarn add react-native-mmkv@1.3.2

Open app.json and add the following:

{
  "expo": {
    ...
    "plugins": ["./plugins/withMMKV"],
    ...
  }
}

Start Expo dev server with for dev client

> expo start --dev-client

Run on a simulator or device

> expo run:ios # add -d to run on device
> expo run:android

Open src/stores/_hydration.ts, uncomment MMKV initialization code and enjoy its perfomance within Expo!

Describe app screens in one place

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',
    }),
  },
  // ...
}

Build layouts with ease

Stack Navigator:

const HomeStack = () =>
  genStackNavigator([
    screens.Main,
    screens.Example,
  ]);

Tab Navigator:

const TabNavigator = () =>
  genTabNavigator([
    tabs.Main,
    tabs.WIP,
    tabs.Settings,
  ]);

Navigate to other screens with predictability

const Screen = ({componentId}) => {
  const {nav} = useServices();

  return (
    <View>
      <Button
        label="Open Settings"
        onPress={() => nav.push('Settings')}
      />
    </View>
  )
}

Samples for new screens, services, stores and components.

So you have one structure within the project. You can find them in corresponding folders. Just copy&paste it and make the necessary changes.

Enhancements

There are still some things I would like to add to the starter:

General

Passing props to a screen example
Constants: add Dimensions
AsyncStorage stores persisting example
Expo Web support
Shared transitions — IjzerenHein/react-navigation-shared-element

Feel free to open an issue for suggestions.

Worth checking

Other starters

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.
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.

Articles

Expo + React Native Navigation? Yes! - Medium, Dev.to
cli-rn — making RN app developing experience as smooth as possible - Medium, Dev.to

Apps in production

Wallpapers App - Twitter, App Store
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

Why

...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.

License

This project is MIT licensed

Alexandre-io / expo-starter