1.0.3 • Published 4 years ago

slashbracket-custom-expo-bare-template v1.0.3

Weekly downloads
-
License
-
Repository
github
Last release
4 years ago

slashbracket.com

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

Version

Expo SDK 37.0.0

Features included

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
  • 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.)
  • containers
    • Containers.js
      • Contains link to all container files in the folder
    • Contains all state based components
  • 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
  • navigation
  • redux
    • Contains all things redux including store, actions, action types, and reducers
  • screens
    • Contains all screens including initial "Home" screen

Installation:

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

  1. Install pods by executing the following command from the root folder (e.g. Event App):

    cd ios && pod install && cd ..
  1. Build and run app either from Xcode using "xcworkspace" file or by executing the following command in the terminal:
    react-native run-ios

Android

  1. Open Project in Android Studio & wait for project to build.
  2. 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);
  1. 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..."
          }
        }
      ]
    }
  1. See Expo Sentry for information on usage.

CodePush (Microsoft):

To enable CodePush, you must: 1. Create an account with Microsoft AppCenter for CodePush.

iOS

  1. Replace "CodePushDeploymentKey" in Info.plist with key received from CodePush.
  2. Replace AppSecret in "AppCenter-Config.plist" with secret received from CodePush. (This enables Analytics)

Android

  1. Replace "CodePushDeploymentKey" in strings.xml located at app -> src -> main -> res -> values -> strings.xml with key received from CodePush.
  2. 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

  1. Go to App.js and change:
export default class App extends Component {

to

class App extends Component {
  1. 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);

Happy Coding!

slashbracket.com

slashbracket.com <- Don't be one!