Introduction to React Native
Nader Dabit
Developer Advocate, AWS Mobile
What is React Native?
• Built using React
• Build cross platform applications using JavaScript
• Target not only iOS & Android, but also Apple TV, VR, AR, Windows, & Desktop
• Released March 2015
• Rapidly gaining in popularity & adoption
• Learn once write anywhere
• Real world projects typically see 80% – 95% code reuse
Who’s using React Native
• Facebook • Tesla
• Instagram • Adidas
• Walmart • Discord
• Salesforce • Wix
• Amazon • Bloomberg
• Skype • Visa
• Baidu • Microsoft
• American Express • JD.com (266 million active users)
Why React Native
• Faster speed of development
• Lower cost of development
• Code reuse
• Easier to find developers
• Ship across multiple platforms
• Possible to ship over the air updates bypassing App Store / Play Store
How does React Native Work?
• Write your application in JavaScript
• JavaScript is transpiled & minified
• Separate threads for UI, layout, and JavaScript
• Threads communicate asynchronously through the native bridge
How does React Native Work?
React Native API
Over 30 UI Primitives
View
Text
ScrollView
Image
TextInput
Switch
React Native API
Mapping to Web UI primitives
View == div
Text == span / p / h*
ScrollView == div + styling
Image == img
TextInput == input
React Native API - Components
Primitives not globally in scope, must be imported
import {
View
Text
ScrollView
Image
TextInput
Switch
} from ‘react-native’
React Native API – Device APIs
Device APIs
CameraRoll
Keyboard
NetInfo
Vibration
PanResponder