CptFabulouso / react-native-app

App Setup

install

• run yarn or npm install

postinstall setup

Change app name, bundle id and package name

Automatically (Recommended)

• install globally and use react-native-rename - yarn global add react-native-rename
• create and checkout new branch
• run react-native-rename <newName> -b <bundleIdentifier>

Manually

Android

• change every occurrence of com.rnapl.app to your desired package name
• change the folder structure to location of MainActivity.java and MainApplication.java according to your package name
• change app_name in ./android/app/src/main/res/values/strings.xml

iOS

• change bundle Identifier in xCode
• change Display name in xCode
• Note: this won't change files in xCode etc., use automatic approach for that

Setting up colors

• modify color string in ./android/app/src/main/res/values/colors.xml

Setting up splash screen

• example of logo files are in ./tempAssets/splashscreen
• replace logo.png files in ./android/app/src/main/res/mipmap-xxxx/
• logo will be shown in the center of screen
• modify background color in ./android/app/src/main/res/values/colors.xml

More splash screen customization

• if you want to show splash screen differently
• modify the res/drawable/splash.xml, res/layout/launch_screen.xml files to your liking
• look at res/values/styles.xml. When app starts, it's going to use the AppTheme, after that the react-native-splash-screen will kick in and show the exact same splash screen using SplashScreenTheme

Setting up screen orientation

• by default, only portrait mode is allowed on phone devices, landscape is allowed for tablet

Android

• this is set using res/values-xxx/bools.xml and with these lines in MainActivity.java in onCreate method

if (getResources().getBoolean(R.bool.portrait_only)) {
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}

iOS

• change it in xCode in General tab under Deployment Info

Post setting up

• delete ./tempAssets folder

Debugging

Debugging redux

project is using redux-devtools-extension, to use this, install:

• react-native-debugger, on macOS can be installed with brew cask install react-native-debugger
  • open with command open "rndebugger://set-debugger-loc?host=localhost&port=8081"
• possibly can be used in chrome with Redux DevTools, but I was unable to run it from there

Available scrips

npm run eslint - run eslint check

npm run flow - run flow check

npm run tsc - watch for typescript errors

Git hooks

• if git hooks are not installed, run ./node_modules/git-hooks/bin/git-hooks install
• if you change path to your project folder (eg. you renamed it or moved it), delete folder .git/hooks and run run ./node_modules/git-hooks/bin/git-hooks install