React Native (Expo) Template

🛑 STOP HERE - Don't Clone this repo unless you're modifying the template. Instead click the Use this template button.

Patterns Included

• Clear folder structure
• Theme & UI Components (react-native-ui-lib)
• Navigation (react-navigation@next)
• Storybook
• .env variables
• Forms & Validation (react-hook-form & yup)
• Async bootApp() for app loading

Getting Started

First, use this repo as a template (click the Use this template button). Then, simply:

$ git clone your-new-repo-url
$ cd your-project-directory
$ yarn
$ yarn dev  # or yarn storybook

Clear folder structure

/assets               # expo assets
/src
  /components
  /context
  /icons
  /navigators         # your app "flows" or "stacks"
    /Main             # your primary drawer navigator
    /Dashboard        # another sample stack navigator
  /screens            # screens shared between flows
  /theme
  /utils
  AppRoot.js          # your primary app entry point
  index.js
/storybook
App.js                # expo app entry point

Theme & UI Components

We use the excellent react-native-ui-lib by Wix for our default component structure & theming. In a basic example, let's say you want to add a custom blue background color to your theme for use in buttons.

In your theme file...

//src/theme/index.js

Colors.loadColors({
  //...
  buttonBlue: '#0000FF'
});

Then in your component...

import { View, Button } from 'react-native-ui-lib';

function MyComponent() {
  return (
    <View flex center>
      <Button
        label="Press Me"
        backgrund-buttonBlue
        onPress={() => alert('Pressed')}
      />
    </View>
  );
}

Navigation

For declarative, hooks-based navigation, we're using the alpha @next branch of react-navigation.

For a comprehensive understanding of how we utilize this, check out:

/src/navigators/Main        # Main "drawer" navigator
/src/navigators/Dashboard   # A comprehensive "stack" navigator

Storybook

Storybook is baked right in. To start developing in components in Storybook, you simply need to:

$ yarn                      # if you haven't already installed
$ yarn storybook

This will automatically replace your app root with the storybook root, and launch Storybook in Expo.

Environment Variable Support

Environment variable support is baked in. To use an environment variable in your app:

$ cp sample.env .env                # clone the sample .env

Then replace any environment variables you need. E.g.

API_HOST=http://api.example.com     # becomes

MY_FOO=bar

Then, in your component, you can use with:

import { View, Text } from 'react-native-ui-lib';
import { MY_FOO } from 'react-native-dotenv';

function MyComponent() {
  return (
    <View flex center>
      <Text>My var is {MY_FOO}</Text>
    </View>
  );
}

Forms & Validation

We are using the excellent react-hook-form library for form state management, which plays nicely with react-native-ui-lib.

For validation, we're using yup schema validation, to automatically connect at a field-level.

Check here for the best example usage

async bootApp()

Most native applications require some form of asyncronous app booting, which we support.

Find bootApp() here