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

• 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

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

/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

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

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

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

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

Find bootApp() here