How can I React

native my Android
app?

Matteo Bonifazi - @mbonifazi

 Who are we?

@mbonifazi
Timelapse
1999 2010 2013
NTT Docomo Android froyo 2.2 1 billion app on Play store
launched i-mode

Mobile Era App Era

2008 2017
HTC Dream sold on public market
Kotlin officially supported by
Google
 WIX app

No Hybrid
UI’s pure Native
Who's using React Native

Full list here

 Learn Once,
Write Anywhere

“Our Biggest Mistake Was Betting Too

Much On HTML5” (2012)
JSX
A new javascript
flavour?
Virtual DOM
Synced memory
representation of UI
 Millestone
Component Prop State
The red brick of your app. Most components can be Data that is going to change
customized when they are throughout the lifetime of a
Anything you see on the created, with different component
screen is some sort of parameters.
component.
RN for my mum
RN for Zuckerberg mum

Javascript Native Native

Core bridge View
RN for Mark Zuckerberg

<Text>
Hello JS plain Virtual Native
Matteo version DOM code
</Text>

JSX react react-native

transpiler engine engine
 Mobile
WEB App
site
developer developer
developer
 Mobile
WEB App
site
developer developer
developer
Integration with Existing Apps
Set up directory structure
The project has a new root
Existing Android code
package.json
{
"name": "MyAndroidReactiveApp",
"version": "0.2.3",
"private": true,
"scripts": {
"start": "node node_modules/………../cli.js start"
}
}
 The yarn step

$ yarn add react-native

$ yarn add react@0.55.2

Let’s check your current

version
 dependencies
dependencies {
compile 'com.android.support:appcompat-v7:23.0.1'
…
// From node_modules
compile "com.facebook.react:react-native:+"
}
 dependencies
allprojects {
repositories {
maven {
"$rootDir/../node_modules/react-native/android"
}
...
}
}
Code integration
Fill the index.js file
RN wraps
native UI components
RN wraps
native API
ReactRootView
ReactInstanceManager
BackPress handling
DefaultHardwareBackBtnHandler interface
 Run the packager

$ yarn start
 Run the app

run your Android app as normal with Android Studio

Common
mistakes
 Dependecies
headache

Be sure you are always using a specific

React Native version in your native
build
 dependencies Error

“Failed to resolve: com.facebook.react:react-native:0.x.x"

Underneath
dependecies
Split apk

Do we ask for that?

 32-bit instead of 64-bit

java.lang.UnsatisfiedLinkError: dlopen failed

<random_library>
 build.gradle
defaultConfig {
...
ndk {
abiFilters 'armeabi-v7a', 'x86', 'armeabi', 'arm64-v8a'
}
}
Not connect to
development
server

android emulator and on real device

Run the packager
$ watchman watch /path/to/dir

$ lsof -i :8081
$ kill -9 <PID>

$ adb reverse tcp:8081 tcp:8081

React Native
gotchas
Painful Setup
but fast debug
Libraries
Which one to import?
Component
Out-of-the box performance
Adopting RN
wisely

each project has its own story

Thanks

@mbonifazi