an ios developer's perspective on react native

An iOS Developer's Perspective on React

NativeAleksandras Smirnovas

cocoa.lt 2016-04-25

Agenda• My experience

• Why React Native

• How it works

• Flex

• Demo

My experience

• My first native iOS app on iOS 4.3

• 10+ native iOS apps

• Objective-C and Swift

• Freelance mobile/web API developer since 2009

Why React Native?

• Learn once, write anywhere

• Consistent developer experience

• Clients want to support multiple platforms

Universal Windows Platform and Samsung (Tizen)Apps built for the Universal Windows Platform can target Windows 10 desktop, mobile, Xbox, and HoloLens.

How it works

• JavaScriptCore

• Node.js

• Watchman (A file watching service)

• Flow (A static type checker for JS)

IDE or Xcode I miss you • Terminal to `npm start`

• Chrome for the debugger

• atom.io + nuclide.io to edit code

• Xcode to run the project and simulator

Install and run

• npm install -g react-native-cli

• react-native init AwesomeProject

• react-native run-ios

Files

Available componentsActivityIndicatorIOS

DatePickerIOS

DrawerLayoutAndroid

Image

ListView

MapView

Modal

Navigator

NavigatorIOS

PickerIOS

Picker

ProgressBarAndroid

ProgressViewIOS

RefreshControl

ScrollView

SegmentedControlIOS

Slider

SliderIOS

StatusBar

Switch

TabBarIOS

TabBarIOS.Item

Text

TextInput

ToolbarAndroid

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

View

ViewPagerAndroid

WebView

RN 0.24

Available APISActionSheetIOS

Alert

AlertIOS

Animated

AppRegistry

AppStateIOS

AppState

AsyncStorage

BackAndroid

CameraRoll

Clipboard

DatePickerAndroid

Dimensions

IntentAndroid

InteractionManager

LayoutAnimation

Linking

LinkingIOS

NativeMethodsMixin

NetInfo

PanResponder

PixelRatio

PushNotificationIOS

StatusBarIOS

StyleSheet

TimePickerAndroid

ToastAndroid

VibrationIOS

Vibration

RN 0.24

Components

import React, { View, Text, Image } from 'react-native';

<View>

<Text>Hello world</Text>

<Image source={require('image!avatar')} />

</View>

Custom Components

import HeaderView from ‘../Components/HeaderView';

<HeaderView

text=“Hello Wold”

image=“http://cocoa.lt/avatar” />

Custom Components

import React, { View, Text, Image } from 'react-native';

<View>

<Text>{this.props.text}</Text>

<Image source={{uri: this.props.image}} />

</View>

Style

import React, { View, Text, Image } from 'react-native';

<View>

<Text style={styles.headline}>

{this.props.text}

</Text>

<Image style={styles.avatar} source={{uri: this.props.image}} />

</View>

Styleconst styles = StyleSheet.create({

item: {

width: 100,

height: 100,

borderRadius: 50,

backgroundColor: 'darkgray',

textAlign: 'center',

fontSize: 18

}

});

Flexbox vs Autolayout Constraints

• flexDirection:'row', 'column'

• justifyContent: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'

• alignItems:'flex-start', 'flex-end', 'center', 'stretch'

• flexWrap:'wrap', 'nowrap'

• alignSelf: 'auto', 'flex-start', 'flex-end', 'center', ‘stretch'

• flex: number

flexDirection column row

justifyContent flex-start center flex-end

alignItems flex-start center flex-end

alignSelf: center

flexDirection: row flexWrap: wrap

flexDirection: column justifyContent: center

alignItems: center

flexDirection: column justifyContent: space-between

alignItems: center

flexDirection: column justifyContent: space-around

alignItems: center

flex: number

Tools: Inspector

Tools

Tools: Perf Monitor

pod, Carthage, npm

• package.json

• Podfile

• left-pad incident

Redux / Flex

• Redux is a predictable state container for JavaScript apps.

• Flux is the application architecture for building UI

Redux / Flex

• Single source of truth

• State is read-only

• Reducers take the previous state and an action, and return the next state

Demo

Thank you

Questions?

@saleksandras