christoz / react-native-template

A minimal template with architecture and boilerplate to let you focus on writing features right away.

react-native-template

A minimal template with architecture and boilerplate to let you focus on writing features right away.

Preconfigured with

• TypeScript
• SWR for data fetching/caching.
• apisauce as data fetcher.
• Redux Toolkit for global state.
• Redux Observable for complex background thread-like work.
• React Navigation (v5) for navigation.
• Reactotron for debugging.
• Sentry for debugging in production.
• react-native-splash-screen because splash screens are cool.
• react-native-svg because svg.
• react-native-config to manage separate environments (dev, staging, production).
• Reanimated for animations.
• Redash its lodash for animations.
• AsyncStorage you're gonna install it anyway.
• FastImage its more performant
• Detox (wip) for e2e.
• Mirage JS the easiest way to mock APIs.
• Fastlane for automation.
• handy npm scripts.

Getting Started

Create a new project using the template.

• Note: the command will fail if you have the global legacy react-native-cli installed. Make sure you uninstall it first. More info at react-native-community/cli.

RN 0.62.2

$ npx react-native init MyApp --template @osamaq/react-native-template

Optional Steps

Connect To Sentry

This template comes with Sentry, but its disabled until you connect your account. It also comes with a custom middleware for Redux. What the middleware does is add your redux action types as breadcrumbs to Sentry's crash logs for easier debugging. It does not log payloads, which you might wish do if your app's networking activity is lightweight.

To connect your account:

$ cd MyApp/

# For MacOS
$ npx sentry-wizard -i reactNative -p ios android

# Other Platforms
$ npx sentry-wizard -i reactNative -p android

Insert your sentry DSN in each .env file (dev, staging and production) and you're all done.