This document summarizes some of the key aspects of React Native, including its layout system, animated API, native module bridge, and JavaScript support. It also briefly touches on upgrading challenges, Android development difficulties, and slower development mode speeds. The document promotes React Native as a framework for building native mobile apps with JavaScript and discusses contributions from both Facebook and the community.

1. ∠
React Native: The Good Parts

2. Architect at Modus Create
Author of React Native Cookbook
Working with React Native >1.5 yrs
Stan Bershadskiy

3. React Native
A framework for building native mobile apps using JavaScript

4. REACT NATIVE
REACT
Declarative goodness
BRIDGE
Communicate between JavaScript and Native threads
NATIVE UI SDK
Render Native UI elements on the main thread

5. The Good Parts

6. Layout System
Flexbox and Absolute positioned layout system written in C++ to achieve maximum
performance. Similar to web standards.
YOGA IS GOOD FOR YOU

7. Modus Create moduscreate.com
FLEXBOX EXAMPLE

8. Animated API
Create Animated Values of a type (spring, decay, timing) that wrap components. The values can
be composed in parallel, sequence or other variations. Animations can be executed on the
native thread for increased performance.*
60 FPS GOODNESS

9. Modus Create moduscreate.com
ANIMATED API EXAMPLES
REACT-NATIVE-FOLDVIEW
https://github.com/jmurzy/react-native-foldview
TWITTER EXPLODING HEARTS
http://bit.ly/2ckTbI1

10. Native Module Bridge
Easily expose native functionality and native UI components to be used by React Native.
NATIVE MADE EASY

11. Modus Create moduscreate.com
NATIVE MODULE EXAMPLES
FINGERPRINT AUTHENTICATION MEDIA PLAYER PLAYBACK

12. It’s just JavaScript
All your business logic can be implemented in JavaScript. React Native’s core dependency is
React. You can leverage any npm module that does not have a DOM dependency.
ANSWER IS PROBABLY ON STACK OVERFLOW

13. Modus Create moduscreate.com
COMMONLY USED JS MODULES
REDUX
Magical state container
LODASH
Ruining looping 1 ‘_’ at a time
MOMENT
Simple date manipulation

14. Community
Facebook and the Community as a whole work hand in hand to further the development of
React Native. >50% commits from community.
EVERYONE IS AWESOME

15. Modus Create moduscreate.com
COMMUNITY CONTRIBUTIONS
EXPO(NENT)
App Development platform
REACT NAVIGATION
Navigation made simple (finally!)
RNPM
Simple linking of native modules

16. The Not-So-Good Parts
They’re not that bad, I promise.

17. Upgrading
“Maybe RN should be called ReactNativeExperimental” - Jay Garcia
HOPE YOU LIKE READING DIFFS

18. Android
Dealing with Native Android code is no fun. Device and version fragmentation cripples the
development experience.
NOT FACEBOOK’S FAULT

19. Development Mode
Apps work much slower in development mode, especially Android.
TASTES LIKE A SWITCH CARTRIDGE

20. Building your next app

21. Create React Native App
Simple platform-independent way to get up and running.
LIKE CREATE-REACT-APP JUST WITH EXPO

22. “STANDARD” WAY
XCODE ANDROID STUDIO JAVASCRIPT IDE

23. Thank you!
Stan Bershadskiy
@stan229
stan@moduscreate.com