diegosquid/expo-starter

This starter is a collection of libraries and approaches needed for fast start and productive maintainance of Expo (React Native) App.

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.

Manual setup

Clone the repo

npx degit kanzitelli/expo-starter app

Install packages

cd app && 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.
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.
MobX - simple, scalable state management, with mobx-persist-store for persisting your stores.
Flash List - a better list for React Native (by Shopify).
React Native Gesture Handler - native touches and gesture system for React Native.

Native libraries

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.
Fast Image - performant React Native image component.

Extra helpful libraries

Release It - automate versioning and publishing of your app.

Useful services/methods

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 of appLaunches there.

Design system

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

Advantages

Describe app layout in one place (w/ 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 './main';
import {Playground} from './playground';
import {Settings} from './settings';
import {Example} from './_screen-sample';

// building layout
export const navio = Navio.build({
  screens: {
    Main,
    Settings,
    Example,
    Playground: {
      component: Playground,
      options: () => ({
        title: 'Playground',
      }),
    },
  },
  stacks: {
    MainStack: ['Main', 'Example'],
    ExampleStack: ['Example'],
  },
  tabs: {
    MainTab: {
      stack: 'MainStack',
      options: {
        title: 'Home',
      },
    },
    PlaygroundTab: {
      stack: ['Playground'],
      options: () => ({
        title: 'Playground',
      }),
    },
    SettingsTab: {
      stack: ['Settings'],
      options: () => ({
        title: 'Settings',
      }),
    },
  },
  modals: {
    ExampleModal: 'ExampleStack',
  },
  root: 'Tabs',
  hooks: [useAppearance],
  options: {
    stack: screenDefaultOptions,
    tab: tabDefaultOptions,
  },
});

export const AppRoot = navio.Root;

Navigate with predictability

export const Screen = () => {
  const {navio} = useServices();

  return (
    <View>
      <Button
        label="Push Settings"
        onPress={() => {
          // Typescript and IDE will help with autocompletion
          navio.push('Settings');
        }}
      />
    </View>
  );
};

Dark mode support

You can define modes in utils/designSystem.tsx.

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:

Auth flow example
Navigation library to reduce boilerplate code.
Shared transitions

Feel free to open an issue for suggestions.

Worth checking

Other starters

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.

Articles

"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

Why

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

License

This project is MIT licensed

diegosquid / expo-starter