2017 - budapest.mobile meetup @ Budapest  I have been an android developer for 5 years now. Beginning of this year I stepped out from my comfort-zone, and tried out React-Native.  After releasing 4 different kind of RN projects, I would like to share my experience and give you some tips so you won't feel like you are fighting for your life when using RN on Android or ios. So what is my "survival kit" contains? A lot of info on project structure and setup, libraries, tools for debugging, best-practices, fastlane, push notifications and much more.

1. Ultimate Survival
React Native edition

2. We experiment, we move fast,
we make it happen
At Supercharge we build high-impact mobile products making life easier for millions of users. Creating
stunning experiences can only happen if you stretch yourself. To supercharge means to go that extra
mile.

3. Getting started

4. Folder structure
Supercharge 4
BAD >

5. Folder structure
Supercharge 5
import { connect } from 'react-redux';
import LandingScreen from './LandingScreen';
function mapStateToProps(state) {
const { app } = state;
const { landing } = app;
return {
...landing,
};
}
export default connect(mapStateToProps)(LandingScreen);

6. yarn over npm
Supercharge 6

7. yarn add react-native-extended-stylesheet
‣ Under construction
Supercharge 7

8. yarn add redux
‣ Plan redux store
‣ reselect
‣ https://github.com/reactjs/reselect
‣ redux-batched-actions
‣ https://github.com/tshelburne/redux-batched-actions
Supercharge 8

9. yarn add react-navigation
‣ Redux integration
‣ https://github.com/react-community/react-navigation/blob/master/docs/guides/Redux-
Integration.md
‣ Keep in mind that when a navigator is given a navigation prop, it relinquishes control of its
internal state. That means you are now responsible for persisting its state, handling any
deep linking, Handling the Hardware Back Button in Android, etc.
‣ Replace a screen when navigate
‣ https://medium.com/handlebar-labs/replace-a-screen-using-react-navigation-
a503eab207eb
Supercharge 9

10. yarn add react-native-offline
Supercharge 10
‣ Reducer to keep your connectivity state in the Redux store
‣ Redux middleware to intercept internet request actions in offline mode and apply DRY
principle
‣ A step further than NetInfo detecting internet access besides network connectivity

11. Avoid react-native link
‣ Sometimes fails (duplicated packages)
‣ Lifesaver if you know, how it works
‣ Android: Gradle
‣ iOS: Cocoapods support from React Native 0.50
Supercharge 11

12. yarn add patch-package --dev
‣ https://github.com/ds300/patch-package
‣ Lets app authors instantly make and keep fixes to npm dependencies
‣ No more forking repos just to fix that one tiny thing preventing your app from
working.
Supercharge 12
# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js
# run patch-package to create a .patch file
patch-package some-package
# commit the patch file to share the fix with your team
git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"

13. Working with React-Native

14. Component lifecycle
Supercharge 14
https://github.com/react-community/react-navigation/issues/51

15. Rendering components
Supercharge 15
https://www.youtube.com/watch?v=HXKFQu2cP4c

16. Rendering components
Supercharge 16

17. Rendering components
Supercharge 17
https://github.com/wix/rn-synchronous-render

18. yarn add react-native-debugger-open --dev
Supercharge 18

19. yarn add reactotron-react-native --dev
Supercharge 19

20. yarn scripts
Supercharge 20
"scripts": {
"cleanup": "watchman watch-del-all && rm -rf node_modules ; rm -rf $TMPDIR/react-* ; rm -rf $TMPDIR/npm-* ; yarn install && rm -
rf ./android/build ; rm -rf ./android/app/build ; rm -rf ios/build ; rm –rf ios/Pods",
"bundle:android-debug":"react-native bundle --platform android --dev true --entry-file index.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/",
"bundle:ios-debug":"react-native bundle --platform ios --dev true --entry-file index.js --bundle-output iOS/main.jsbundle",
"run:android-uat": "export ENVFILE=.env.uat && react-native run-android --variant=uatDebug && adb shell monkey -p com.app.uat 1",
"run:ios-uat": ”export ENVFILE=.env.uat react-native run-ios --configuration uat-debug --scheme uat-app",
...
}

21. Releasing the app

22. Flavors and schemes and signings
‣ iOS Build Configurations and Android Build Variants
‣ https://medium.com/@ywongcode/building-multiple-versions-of-a-react-native-app-
4361252ddde5
‣ Must solve it natively
‣ Learn the following definitions:
‣ iOS: keychain access, signing identity, auth key, (wildcard) app id, device udid,
provisioning profile, development/distribution certificate, development/ad-
hoc/appstore profile, developer portal != itunes connect,
‣ Android: debug/release keystore, (upload and signing key!)
Supercharge 22

23. yarn add react-native-config
‣ Expose config variables to javascript code in React Native, supporting both iOS and Android
‣ Android: dotenv.gradle
‣ iOS: BuildDotenvConfig.ruby
‣ Supports flavors and schemes
‣ Recompile needed
‣ A babel plugin for react-native-config to avoid clean/rebuild for javascript config changes
‣ https://github.com/j2kun/babel-plugin-react-native-config
Supercharge 23

24. yarn add react-native-schemes-manager --dev
Supercharge 24
react-native/scripts/react-native-xcode.sh
. . .
case "$CONFIGURATION" in*Debug*)
if [[ "$PLATFORM_NAME" == *simulator ]]; then
. . .
. . .
if [[ "$CONFIGURATION" = "Debug" && ! "$PLATFORM_NAME" == *simulator ]]; then
PLISTBUDDY='/usr/libexec/PlistBuddy'
PLIST=$TARGET_BUILD_DIR/$INFOPLIST_PATH
. . .
‣ Swap its own version of react-native-xcode.sh in instead of the stock one that assumes all
debug schemes are named 'Debug'.
‣ Add your build configurations to all library Xcode projects.
‣ Hide any schemes that come from your library projects so they don't show up in the me

25. Fastlane
Supercharge 25
source "https://rubygems.org"
ruby "2.3.1"
gem 'fastlane'
gem 'xcode-install'
gem 'cocoapods'
gem 'fastlane-plugin-increment_version_code’ # android version code
gem 'fastlane-plugin-yarn'
fastlane init

26. fastlane ios beta scheme:scheme …
Supercharge 26
platform :ios do
before_all do
# xcode_select "/Applications/Xcode.app"
# xcversion(version: "8.3.2")
yarn(command: "install", package_path: "../package.json")
cocoapods(use_bundle_exec: true, repo_update: true)
end
lane :beta do |options|
build_nr = `git rev-list --count HEAD`
increment_build_number(xcodeproj: "./app.xcodeproj", build_number: build_nr)
update_app_identifier(xcodeproj: "./app.xcodeproj", plist_path: "app/Info.plist", app_identifier: options[:app_id])
gym(clean: true, scheme: options[:scheme], export_method: 'ad-hoc', configuration: options[:config], project:
'./app.xcodeproj')
crashlytics(api_token: "appToken", build_secret: "buildSecret", emails: emails, groups: groups,
notifications: true)
end
end

27. fastlane android beta task:task …
Supercharge 27
platform :android do
before_all do
yarn(command: "install", package_path: "../package.json")
end
lane :beta do |options|
build_nr = `git rev-list --count HEAD`
increment_version_code(version_code: build_nr.to_i)
gradle(task: options[:task])
crashlytics(api_token: "appToken", build_secret: "buildSecret", emails: emails,
groups: groups, notifications: true)
end
end

28. Push notifications
‣ https://github.com/zo0r/react-native-push-notification
‣ https://github.com/invertase/react-native-firebase
‣ https://github.com/evollu/react-native-fcm
Supercharge 28

29. Thank you!
We are hiring!
Richard Radics
Supercharge
Lead Developer
richard.radics@supercharge.io // www.supercharge.io