React Native: React Meetup 3

React NativeReact Meetup 3 - February 11, 2016

- Rob Gietema @robgietema

Who am I?

Why React Native?

Native development

UIWebView

ReactState > Components > DOM

React NativeState > Components > DOM, iOS Views, Android Views

Learn once write anywhere

What does React Native provide?Touch HandlingNative ComponentsStyle & Layout

How to installMac OS XHomebrewNode >= 4.0

How to installnpm install -g react-native-cli

Optionalnpm install watchmen npm install flow

iOSInstall Xcode

AndroidInstall JDK

Androidbrew install android-sdk export ANDROID_HOME=/usr/local/opt/android-sdk

Configure SDKandroid

Configure SDK

Configure SDK

Create Android Virtual Deviceandroid avd

Create Android Virtual Device

Getting startedreact-native init ExampleApp

Run Androidreact-native run-android

Run iOS

ComponentsViewTextListViewScrollViewTextInputNavigatorImage...

Components

Native modules

Frameworks

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

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

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

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

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

Navigator MethodsgetCurrentRoutes() - 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

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

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

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

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

Questions?slideshare.net/robgietema