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

Expo Starter is a part of starters.dev collection.

If Expo Starter helped you in any way, don't hesitate to ⭐️ the repo!

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

1. Clone the repo

npx degit kanzitelli/expo-starter app

2. Install packages

cd app && yarn

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

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.

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

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;

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>
  );
};

App flows

You can find different app flows, such as Auth flow, simple 2 screens, 3 tabs, etc., in the navio.tsx.

Dark mode

You can define modes in 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.
• Expo Image added.
• Shared transitions (w/ Reanimated v3)

Feel free to open an issue for suggestions.

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