An opinionated template to bootstrap your next React Native app with all the time-wasting packages you need to have.
In this template is started with example fetching datas from Star Wars Api, where is showing Peoples with Name and HomeWorld and in the next screen when on pressed more details about People. In /docs/assets there are more photos.
Create a new project using the template.
$ npx react-native init MyApp --template @hmarques98/react-native-template-typescript
This template comes with Sentry, but its disabled until you connect your account.
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.
Implementation was based on react-navigationinstructions.
Update the prefix with wanted URI in
CFBundleURLSchemes to your desired URI
android:scheme value inside
<data> tag from the
You must be a member of the Apple Developer Program in order to enable Push Notifications
You will need to have OneSignal Account
Your OneSignal App ID, available in Keys & IDs iOS.
IOS - Generate an iOS Push Certificate. You should generate a certificate after adding the Push Notification capability while setting up your iOS app.
In your main app target go back to Signing & Capabilities > All > + Capability and add App Groups
For more instructions and doubts, go to Documentation Integration
You will need to have AppCenter CLI installed
Creating an AppCenter account and/or organization and create an app for each platform and environment
Copy and Replace the CodePushDeploymentKey in android/app/build.gradle under
Copy and Replace the CodePushDeploymentKey in android/app/build.gradle and XCode -> YourProject -> Build Settings ->
You can retrieve this values by running
appcenter codepush deployment list -a <ownerName>/<appName> -k
Let's briefly go over the benefit of each library included in this template.
For type safety ¯\(ツ)/¯
Style your apps without stress with dynamic styling and painless maintenance.
styled-components utilises tagged template literals to style your component. Checkout this Getting started tutorial.
Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object with typographic scales, colors, and layout properties. Checkout this Getting started tutorial.
Hooks for fetching, caching and updating asynchronous data in React.
I like to used axios because your interceptors configurations.
I'm happy using Redux Toolkit. It's a lot more concise now and I enjoy the redux ecosystem of plugins.
SWR reduces our dependency on Redux for global state. And sometimes React Navigation can be used to send data to the next screen. I try to leverage these two before reaching out to global state.
If you prefer something else, remove redux and go with that. Do not waste time trying a new state management solution.
It is the most popular navigation library. For most apps, this is the best choice.
Save and use credentials from phone's Keychain/Keystore
A unified permissions API for React Native on iOS and Android. For iOS you have to the
Podfile with permissions pod and update
Info.plist with wanted permissions descriptions. For Android add wanted permissions in
Localization using hooks. React Native example
OneSignal is the fastest and most reliable service to send push notifications, in-app messages, and emails to your users on mobile
Benefitial in debugging issues that occur only in release builds. You can view error stack traces for unhandled exceptions. You can also choose to log specific errors in some catch blocks to study how often they occur in production.
Works great for controlling your splash screen. To help about lib
$ npx react-native generate-bootsplash --help
Full command usage example to put your SplashScreen
npx react-native generate-bootsplash assets/splash.png \ --background-color=F5FCFF \ --logo-width=100 \ --assets-path=assets \ --flavor=main
Only iOS follow this instructions from library BootSplash
where is saying
Set the BootSplash.storyboard as launch screen file:
Prefer using SVG over images all the time (remember to optimize your SVGs).
Android: by default, running
react-native run-android will use the development .env file. To load .env.staging we must use:
ENVFILE=.env.staging react-native run-android
Note: the above works on MacOS. For windows its a bit different. See Different Environments.
iOS: two additional schemes are created in the Xcode project for staging and production. The corresponding .env file is set via the scheme's pre-action:
NPM scripts for running the app with the desired configuration are included for convenience.
Necessary when creating complex gesture based animations that are highly performant.
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile!
For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.
Custom react hook, built to handle iOS or Android appState in your react component.
A simple file-logger for React Native with configurable rolling policy, based on CocoaLumberjack on iOS and Logback on Android.
For caching simple data such as user perferences.
Drop in replacement for the
<Image/> component. I've found this to give a performance boost on android when rendering many images.
Network Info API for Android, iOS, macOS & Windows. It allows you to get information on:
For unit and component testing.
For end-to-end testing.
Mirage is an in-memory server for intercepting API calls and returning whatever data you want. Very useful for developing before the backend is deployed, and for confirming how the app reacts to different API call outcomes.
Fastlane community has an endless amount of mobile development automation plugins. I currently use it mainly for automatic versioning, and often for deploying to Microsoft's App Center in one command.
This template also has a fastlane command for adding version badges to app icons. Useful outside of production as it makes it easier for QA to tell the app version.
If you appreciate those libraries and find them useful, please consider supporting them.
root ├── __mocks__ ├── __tests__ ├── android ├── ios ├── storybook | └── addons.js | └── index.js | └── rn_addons.js └── src └── components | └── molecules └── Box └── Box.tsx └── index.tsx └── stories.tsx └── Button └── Button.tsx └── index.tsx └── stories.tsx └── Typography └── Typography.tsx └── index.tsx └── stories.tsx | └── organisms └── CardPeoples.tsx | └── StatusBar.tsx | └── stories.ts └── hooks | └── useCustomBackBehaviour.tsx | └── useInfinityQuery.tsx | └── useReactQuery.tsx | └── useOneSignal.tsx | └── useStartupTime.tsx └── interfaces | └── IPeople.ts └── localization | └── resources | | └── en.json | | └── index.ts | | └── ro.json | └── index.tsx └── navigation | └── RootNavigation.tsx | └── Router.tsx └── navigation | ├── RootNavigation.tsx | └── Router.tsx └── screens | ├── CharacterDetail.tsx | ├── Home.tsx | ├── index.ts └── utils ├── constants.ts └── console.ts └── services ├── axios.ts └── store └── slices └── auth.ts └── index.ts └── index.ts └── rootReducer.ts └── styles ├── colors.ts ├── typography.ts ├── spacing.ts ├── index.ts ├── plop-templates └── CommonScreen.js.hbs └── Component.js.hbs └── ExportIndex.js.hbs └── Stories.js.hbs ├── e2e ├── assets ├── fastlane
Thank you ❤️