slashbracket-custom-expo-bare-template v1.0.3
slashbracket.com <- Don't be one!
React Native Custom Expo Bare Template
This template provides an Expo Bare Workflow project with features that most apps require. All features are already linked, and only minimal setup is required such as uncommenting to enable features and connecting accounts.
Table of Contents
- React Native Custom Expo Bare Template
Version
Expo SDK 37.0.0
Features included
- Splash Screen via BootSplash
- App pre-loading with Expo Fonts & Expo Assets (Images)
- Redux
- React Redux
- Redux Persist
- Redux Thunk
- Async Storage](https://github.com/react-native-community/async-storage)
- React Navigation
- React Navigation base install
- React Navigation Stack
- React Navigation Bottom Tabs
- React Navigation Material Top Tops
- Push Notifications using OneSignal
- Over-the-air updates using Microsoft's Code Push. (Note: Expo's OTA updates have been disabled so that CodePush could be used instead.)
- Invertase
- Error Reporting via Expo Sentry
- Lodash
- Network detection via Netinfo
- Babel Eslint and its dependencies
Project Folder Structure (Defaults)
- Imports.js (Root Folder)
- Contains links to all Import files (Components.js, Constants.js, Containers.js, Functions.js)
- config
- Contains any config files needed (e.g JSON files, etc.)
- components
- Components.js
- Contains link to all component files in the folder
- Contains all funtional presentational components
- Components.js
- constants
- Constants.js
- Contains link to all constant files in the folder
- Alerts.js
- Contains all alert messages
- Colors.js
- Contains all colors used
- Styles.js
- Contains Brand styles (Text, Fonts, etc.)
- Constants.js
- containers
- Containers.js
- Contains link to all container files in the folder
- Contains all state based components
- Containers.js
- experiments
- Contains experimental components or containers that loads for fast testing. Must set isExperimenting to true in App.js
- functions (Optional)
- Functions.js
- Contains link to all function files in the folder
- Contains reusable functions js files
- Functions.js
- navigation
- Contains all navigators used in the app
- AppNavigator.js
- Stack Navigator with "Home" screen & Authorization flow (See React Navigation Authentication Flows)
- redux
- Contains all things redux including store, actions, action types, and reducers
- screens
- Contains all screens including initial "Home" screen
Installation:
- Init new project with: (locally if downloaded)
expo init PROJECTNAME --template file:///Users/user/slashbracket-custom-expo-bare-template
or (remotely):
expo init PROJECTNAME --template slashbracket-custom-expo-bare-template
iOS
Install pods by executing the following command from the root folder (e.g. Event App):
cd ios && pod install && cd ..
- Build and run app either from Xcode using "xcworkspace" file or by executing the following command in the terminal:
react-native run-ios
Android
- Open Project in Android Studio & wait for project to build.
- Build and run app either from Android Studio or by executing the following command in the terminal:
react-native run-android
Features Setup
(Note: The following features below are optional and are not necessary to successfully build and run the app)
Splash Screen:
Method 1:
To generate a custom splash with your own icon, see BootSplash.
Method 2:
iOS
Using Xcode's Storyboard, open BootSplash.storyboard and edit to include an ImageView covering the full view with the image of your choosing for your splash.
Android
Using either an online converter or extension of Android Studio, place splash images (named "splash.png") into mipmap folders in app -> src -> main -> res.
Go to app -> src -> main -> res -> drawable and open bootsplash.xml for editing. Replace the contents of the file with:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item android:drawable="@mipmap/splash" android:gravity="center" />
</layer-list>
The above code, replaces a dynamic creation of a splash using the app's icon and a background color with a full view image.
Finish up
After following either Method 1 or Method 2, be sure to clean projects in Xcode and Android Studio and reset cache with this command:
react-native start --reset-cache
Sentry Error Reporting:
To enable Sentry, you must: 1. Create an account with Sentry. Once created, you will receive a "dsn" and an authToken. 2. Go to App.js in the root folder of the app and replace the "dsn" value with the one you received. 3. Uncomment the following lines of code from App.js:
Sentry.init({
dsn: 'YOUR DSN HERE',
enableInExpoDevelopment: true,
debug: true
});
Sentry.setRelease(Constants.manifest.revisionId);
- Got to app.json in the root folder and fill out the following information:
"hooks": {
"postPublish": [
{
"file": "sentry-expo/upload-sourcemaps",
"config": {
"organization": "Organization that you signed up with Sentry",
"project": "Project Name that you registered with Sentry",
"authToken": "Add your auth token here..."
}
}
]
}
- See Expo Sentry for information on usage.
CodePush (Microsoft):
To enable CodePush, you must: 1. Create an account with Microsoft AppCenter for CodePush.
iOS
- Replace "CodePushDeploymentKey" in Info.plist with key received from CodePush.
- Replace AppSecret in "AppCenter-Config.plist" with secret received from CodePush. (This enables Analytics)
Android
- Replace "CodePushDeploymentKey" in strings.xml located at app -> src -> main -> res -> values -> strings.xml with key received from CodePush.
- Replace AppSecret from "appcenter-config.json located at app -> src -> main -> assets -> appcenter-config.json with secret received from CodePush. (This enables Analytics)
Finish up
- Go to App.js and change:
export default class App extends Component {
to
class App extends Component {
- Scroll to bottom of file and uncomment:
export default codePush(App);
Firebase (via Invertase):
To enable Firebase via Invertase, you must swap out the:
iOS
GoogleService-Info.plist (located in project folder in Xcode)
with the project specific credentials retrieved from the Firebase Console of the project. See Invertase for more information. Then edit the AppDelegate.m file and uncomment:
#import <Firebase.h>
and in didFinishLaunchingWithOptions uncomment:
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
Android
google-services.json (located in app folder in Android Studio)
with the project specific credentials retrieved from the Firebase Console of the project. See Invertase for more information. Then edit the /android/build.gradle file and uncomment:
classpath 'com.google.gms:google-services:4.3.3'
and in /android/app/build.gradle uncomment:
apply plugin: 'com.google.gms.google-services'
(Template Developer Note (Users Ignore): When installing Invertase base app, the google_services needs to be upgraded from the intructions provided).
app -> build.gradle should contain under dependencies:
classpath 'com.google.gms:google-services:4.3.3'
One Signal (Push Notifications):
To enable One Signal, you must: 1. Create an account on One Signal for React Native. 2. Add One Signal ID in App.js to:
OneSignal.init("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", { kOSSettingsKeyAutoPrompt: true });
Note: The push notification listeners and their associated call back methods can be moved to other screens after authentication, but they are recommended at the root of the app.
OneSignal.addEventListener('received', this.onReceived);
OneSignal.addEventListener('opened', this.onOpened);
OneSignal.addEventListener('ids', this.onIds);