Web and mobile development have always been separate worlds. Sure there have been tools like PhoneGap but it never matched the performance of native apps. React Native is here to change all that by using React to render native components for both iOS and Android. This talk will give an introduction to React Native though the eyes of a web developer.

1. React Native
React Meetup 3 - February 11, 2016
-Rob Gietema @robgietema

2. Who am I?

3. Why React Native?

4. Native development

5. UIWebView

6. React
State > Components > DOM

7. React Native
State > Components > DOM, iOS Views, Android Views

8. Learn once write anywhere

9. What does React Native provide?
Touch Handling
Native Components
Style & Layout

10. How to install
Mac OS X
Homebrew
Node >= 4.0

11. How to install
npm install -g react-native-cli

12. Optional
npm install watchmen
npm install flow

13. iOS
Install Xcode

14. Android
Install JDK

15. Android
brew install android-sdk
export ANDROID_HOME=/usr/local/opt/android-sdk

16. Configure SDK
android

17. Configure SDK

19. Configure SDK

21. Create Android Virtual Device
android avd

22. Create Android Virtual Device

24. Getting started
react-native init ExampleApp

25. Run Android
react-native run-android

26. Run iOS

27. Components
View
Text
ListView
ScrollView
TextInput
Navigator
Image
...

28. Components

29. Native modules

30. Frameworks

31. TextInput
<TextInput
ref="title"
autoFocus={true}
placeholder={Untitled}
style={styles.title} />
<TextInput
ref="description"
multiline={true}
placeholder={Description}
style={styles.description} />

32. Button
<TouchableOpacity onPress={() => console.log('pressed')}>
<View>
<Text>Button</Text>
</View>
</TouchableOpacity>

33. Styles and Layout
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
},
instructions: {
textAlign: 'center',
marginBottom: 5,
},
});

34. Navigator
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
// Return view based on route
} />

35. Navigator Methods
getCurrentRoutes() - returns the current list of routes
jumpBack() - Jump backward without unmounting the current scene
jumpForward() - Jump forward to the next scene in the route stack
jumpTo(route) - Transition to an existing scene without unmounting
push(route) - Navigate forward to a new scene
pop() - Transition back and unmount the current scene
replace(route) - Replace the current scene with a new route
replaceAtIndex(route, index) - Replace scene specified by index
replacePrevious(route) - Replace the previous scene
resetTo(route) - Navigate to a new scene and reset route stack
immediatelyResetRouteStack(routeStack) - Reset scene with array
popToRoute(route) - Pop to a particular scene
popToTop() - Pop to the first scene in the stack

36. Fetch data
fetch(encodeURI('http://myendpoint'))
.then(response => {
// Handle data
});

37. AsyncStorage
async setMyValue(value) {
try {
await AsyncStorage.setItem(MY_KEY, value);
} catch (error) {
// Handle error
}
}

38. AsyncStorage
async loadMyValue() {
try {
let notes = await AsyncStorage.getItem(MY_KEY);
} catch (error) {
// Handle error
}
}

39. AsyncStorage
async removeValue() {
try {
await AsyncStorage.removeItem(MY_KEY);
} catch (error) {
// Handle error
}
}

40. Questions?
slideshare.net/robgietema