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