React Native is the new kid in town. So what is it, what problems does it solve and “do I need to know native to work with it” are a some of the questions to be answered.

1. Panagiotis Vourtsis
Front-End Developer @orfium
AN EMOJI INTRO
TO REACT NATIVE

2. #RNISAWESOME
WHAT I WILL TRY TO COVER
▸ What is RN anyway?
▸ RN API
▸ Examples
▸ Daily tools
▸ Native Modules
▸ Other alternatives

3. VUE
REACT
ANGULAR
BACKBONE METEOR.JS
EMBER.JS
POLYMER
MITHRIL

4. FIRST THOUGHTS

5. #RNISAWESOME
NATIVE APPS ? REALLY ??
▸ Faster
▸ Responsive
▸ Complex gestures
▸ Mobile functionalities usage
▸ Different market for users
but how to stay up with the scale etc?

6. WHAT IS RN ANYWAY?

7. #RNISAWESOME
REACT AND REACT NATIVE
ReactJS is a JavaScript library where you can use it to build user
interfaces for the web either standalone or being served from a
server.
What you will need?
‣ A bundler - Webpack setup
‣ Testing environment
‣ jest maybe
‣ enzyme maybe
‣ …etc

8. #RNISAWESOME
REACT AND REACT NATIVE
React Native is a mobile framework that uses ReactJS and compiles
to native app components.
This way it allowing you to build native mobile applications for
different platforms (iOS, Android, and Windows Mobile) in
JavaScript. In order to do so you will may need Xcode or Android
Studio
It comes out of the box with:
‣ packager (bundler) called metro
‣ jest environment for testing
‣ flow for typing

9. #RNISAWESOME
RN API
DIV
SPAN
IMG
VIEW
TEXT
IMAGE
TOUCHABLE OPACITY
SCROLLVIEW
…

10. SOME EXAMPLES

11. #RNISAWESOME
import React from 'react';
const Welcome = () => (
<div>
Welcome GreeceJS
</div>
);
export default Welcome;
import React from 'react';
import { Text, View } from ΄react-native΄;
const Welcome = () => (
<View>
<Text>Welcome GreeceJS </Text>
</View>
);
export default Welcome;
SIMPLE TRANSFORMATION

12. #RNISAWESOME
import React from 'react';
const Welcome = () => (
<div>
<span>Welcome GreeceJS </span>
<span style={{ marginTop: 100 }}>
Hey i am right here!
</span>
</div>
);
export default Welcome;
import React from 'react';
import { Text, ScrollView } from ΄react-
native΄;
const Welcome = () => (
<ScrollView>
<Text>Welcome GreeceJS </Text>
<Text style={{ marginTop: 100 }}>
Hey i am right here !!
</Text>
</ScrollView>
);
export default Welcome;
SCROLL CONTENT

14. #RNISAWESOME
import React from 'react';
const data = {[
{id: '11', key: 'Devin'},
{id: '12', key: 'Jackson'},
{id: '13', key: 'James'},
{id: '14', key: 'Joel'},
]}
const Rankings = () => (
<ul>
{data.map(({ key, id }) => (
<li key={id}>{key}</span>
)}
</ul>
);
export default Rankings;
import React from 'react';
import { Text, View, FlatList } from ΄react-native΄;
const Rankings = () => (
<View>
<FlatList
data={[
{id: '11', key: 'Devin'},
{id: '12', key: 'Jackson'},
{id: '13', key: ‘James'},
]}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Text>{item.key}
</Text>}
/>
</View>
);
export default Rankings;
LIST

16. #RNISAWESOME
{
container: {
width: 100%;
position: relative;
margin-top: 10px;
}
}
StyleSheet.create({
container: {
width: ‘100%’,
position: ‘relative’,
marginTop: 10
}
})
STYLING

17. Native App
MAIN THREAD
JAVASCRIPT
BRIDGE - NATIVE MODULES API
ASYNC
BATCHED
SERIALISABLE
SYNC

18. %Memorypercore
0
15
30
45
60
PROFILE TO DO LIST PAGE VIEW MAPS
56,02%
24,29%
44,2%
26,52%
42,34%
18%
45,73%
28,38%
Swift RN
CPU USAGE

19. #RNISAWESOME
DAILY TOOLS
This is the regular hot reload of react, on every change you can
see the changes on your simulator
HOT RELOADING
Reloads the app on every change
LIVE RELOAD
DEBUGGING - PERFORMANCE
Enables the debugging inspector
REMOTE JS DEBUGGING
Shows the frames per screen in order to see which screens
underperform
SHOW PERF MONITOR

20. #RNISAWESOME
DAILY TOOLS
RN debugging tools
‣ react-devtools (npm)
‣ react-native debugger (redux)
de-
‣ Inspect network requests like in web
‣ Redux inspect for state
‣ React profiling

21. #RNISAWESOME
REACT NATIVE CHALLENGES
Not very stable modules, event official ones (react-navigation)
iOS / android behave differently in some cases
Although is react doesn’t behave like a web app
Need to understand native renders differently
Keep in mind of performance when dealing with lists
Dealing with emulators vs physical devices
Error logging for production is often difficult to debug

22. #RNISAWESOME
REACT NATIVE PROS & CONS
✓ Hot reloading
✓ Multiple platforms
✓ Faster build for smaller apps
✓ On the fly JS Bundle
✓ Bigger pool of devs
- Lack of modules
- Native developers still needed
- Immaturity on tools

23. #RNISAWESOME
CURRENTLY
Facebook
FB Ads Skype Discord Pinterest
WalmartInstagramFB Analytics
TURNED AWAY
Udacity
Airbnb
REACT NATIVE APPS

24. WHAT IF THERE ARE NO READY
MODULES ??

25. NATIVE MODULES

26. #RNISAWESOME
MODULE PACKAGE
APPLICATION
VIEW
MANAGER
VIEW
REACT EXPOSURE

27. #RNISAWESOME
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MeetupPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}

28. #RNISAWESOME
public class JSMeetupPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new JSMeetupModule(reactContext));
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
List<ViewManager> modules = new ArrayList<>();
modules.add(new JSMeetupViewManager(reactContext));
return modules; // if we have a view else return Collections.emptyList();
}
}

29. #RNISAWESOME
class JSMeetupModule extends ReactContextBaseJavaModule {
private static String mPremium = "";
public JSMeetupModule(ReactApplicationContext reactContext) {
super(reactContext);
...
}
@Override
public String getName() {
return "JSMeetup";
}
@ReactMethod
public void setPremium(String premium) {
mPremium = premium;
}
}

30. #RNISAWESOME
MODULE PACKAGE
APPLICATION
VIEW
MANAGER
VIEW
REACT EXPOSURE

31. #RNISAWESOME
class JSMeetupReactView extends Component {
setPremium(str) {
NativeModules.JSMeetup.setPremium(str);
}
render() {
return <JSMeetupView
{...this.props}
ref="JSMeetupReactView"
/>;
};
}
const JSMeetupView = requireNativeComponent(
'JSMeetupView',
JSMeetupReactView,
{
nativeOnly: { onChange: true }
}
);
module.exports = JSMeetupReactView;

32. #RNISAWESOME
public class JSMeetupViewManager extends SimpleViewManager<JSMeetupView> {
private JSMeetupView view;
public JSMeetupViewManager(ReactApplicationContext reactContext) {
view = new JSMeetupView(reactContext);
}
…
@ReactProp(name = "inputUrl")
public void setInputUrl(JSMeetupView view, @Nullable String inputUrl) {
view.setInputUrl(inputUrl);
}
@Override
public void receiveCommand(JSMeetupView root, int commandId, @Nullable
ReadableArray args) {
switch (commandId) {
case "blah":
root.blah();
break;
}
}
}

33. #RNISAWESOME
public class JSMeetupView extends AnyComponent implements LifecycleEventListener {
public JSMeetupView(ReactApplicationContext context) {
super(context);
context.addLifecycleEventListener(this);
}
public void setInputUrl(String inputUrl) {
...
}
public void blah() {
...
}
}

34. #RNISAWESOME
MODULE PACKAGE
APPLICATION
VIEW
MANAGER
VIEW
REACT EXPOSURE

35. #RNISAWESOME
class JSMeetupReactView extends Component {
setPremium(str) {
NativeModules.JSMeetup.setPremium(str);
}
setInputUrl(url) {
NativeModules.JSMeetup.setInputUrl(url);
}
blah() {
UIManager.dispatchViewManagerCommand(
findNodeHandle(this.refs.JSMeetupReactView),
UIManager.JSMeetupView.Commands.blah,
null
);
}
render() {
return <JSMeetupView
{...this.props}
ref="JSMeetupReactView"
/>;
};
}
const JSMeetupView = requireNativeComponent(
'JSMeetupView',
JSMeetupReactView,
{
nativeOnly: { onChange: true }
}
);
module.exports = JSMeetupReactView;

36. EXPO VS RN INIT

37. #RNISAWESOME
Expo is the easiest way to start building a new React Native
application. It allows to start a project without installing or
configuring any tools to build native code

38. #RNISAWESOME
EXPONENTRN INIT
ios/
android/
index.js
App.js
index.js
App.js
it's not possible to include custom native modules beyond the React
Native APIs and components that are available in the Expo client app

39. #RNISAWESOME
▸ Will I need access to the Native portion of the codebase?
▸ Will I need any third party packages in my app that are not
supported by Expo?
▸ Will my app need to play audio while it is not in the foreground?
▸ Will my app need location services while it is not in the
foreground?
▸ Will I need push notification support?
▸ Am I comfortable working in Xcode and Android Studio?

40. OTHER ALTERNATIVES

41. #RNISAWESOME
▸ Ionic
▸ Run on a “webview” with cordova - performance issues
▸ Write once run everywhere
▸ Mimic the platform’s widgets to make your application look native
▸ Angular (lately you can write with VUE as well)
▸ Xamarin
▸ a complete set of tools (diagnostics, debugging)
▸ Just in time & Ahead of time compilation = faster application
startup
▸ You need to write on C#

42. THANK YOU !
Panagiotis Vourtsis
Front-End Developer @orfium
#RNISAWESOME
https://www.youtube.com/watch?v=hDviGU-57lU
https://medium.com/the-react-native-log/comparing-the-performance-
between-native-ios-swift-and-react-native-7b5490d363e2
https://gist.github.com/panvourtsis/
714155aa2325b7b3b35bdb91f53fe2d3
LINKS