In our daily lives as iOS developers, we can usually happily keep coding away in Swift and ignore what’s going on in other software development communities, like that of JavaScript. However, there may be some advantages to at least becoming familiar with what’s going on in the world of React Native, and in this session you will get an overview of what React Native is, and why it could be a useful addition to your toolbox an iOS developer. These slides are based on a talk given by Evan K. Stone at the Forward Swift conference in San Francisco on March 2, 2017.

1. What’s This React Na.ve
Thing I Keep Hearing About?
Evan K. Stone
Senior iOS Developer
Cloud City Development // San Francisco

2. An integrated design and so-ware consultancy specializing in web and mobile apps

3. iOS Dev Break Podcast
iOS Dev Break: 15 minutes of current events, 8ps,
and advice for iOS Developers!

4. Quick Clarifica.on.

5. This talk is…

6. 1. A brief overview of
React Na.ve

7. 2. Good Stuff/Bad Stuff in
React Na.ve

8. 3. Reasons why you may want
to use React Na.ve…

9. …or not.

10. This talk is not…

11. A tutorial about React Na.ve

12. A deep-dive into React Na.ve

13. A mo.va.onal speech about why everyone
should drop everything and switch to Javascript
and learn a totally new development paradigm
for crea.ng mobile applica.ons

14. Reminder:

15. I’m an iOS/SwiV developer.

16. I run an iOS development
podcast.

17. 🤔

19. OK, but seriously, what is it?

20. What is this React Na.ve thing
I keep hearing about?

21. A Javascript-based development
framework for crea.ng mobile
applica.ons

22. Not a hybrid app running inside
a webview

23. Not (always) a wrapper around
na.ve components

24. Side note…

25. This was a big confusion point
for me.

26. You can use ES6

27. …and some ES7.

28. Example:
async/await

29. ES6 - Feels a li`le more
"SwiVy"

30. let and const

31. 🙄

32. JSX
JavaScript XML

33. <View style={styles.headerContainer}>
<Text style={styles.headerMessage}>Messages</Text>
<TextInput
style={styles.textInput}
onChangeText={(entryText) => this.setState({entryText})}
onSubmitEditing={(event) => this.onGoButtonPressed()}
placeholder={'Enter Message'}
value={this.state.entryText}
returnKeyType="go"
/>
</View>

34. state

35. props

36. To learn more…

37. React Na.ve
JavaScript Environment
h`ps://facebook.github.io/react-na.ve/docs/javascript-environment.html

38. JavaScript CSS and Flexbox

40. The Good, The Bad, and
The Amazing

41. The Good.

42. It works!

43. Cross-Plahorm Magic

44. JavaScript

45. Debugging with Chrome

46. Wait, What???

47. CSS

48. Components

49. KeyboardAvoidingView

50. Build-your-own Components

51. <View style={Style.sceneContainer}>
<View style={Style.subNav}>
<Text style={Style.subNavText}></Text>
</View>
<View style={styles.loadingIndicatorContainer}>
<View>
<ActivityIndicator
animating={this.state.animating}
color={indicatorColor}
size={indicatorSize}
/>
<Text style={styles.message}>{message}</Text>
</View>
</View>
</View>

52. <View style={Style.sceneContainer}>
<View style={Style.subNav}>
<Text style={Style.subNavText}></Text>
</View>
<View style={styles.loadingIndicatorContainer}>
<View>
<ActivityIndicator
animating={this.state.animating}
color={indicatorColor}
size={indicatorSize}
/>
<Text style={styles.message}>{message}</Text>
</View>
</View>
</View>

53. <View style={Style.sceneContainer}>
<View style={Style.subNav}>
<Text style={Style.subNavText}></Text>
</View>
<View style={styles.loadingIndicatorContainer}>
<LoadingIndicator
containerStyle={styles.loadingIndicator}
show={true}
/>
</View>
</View>

54. PropTypes

55. AddButton.propTypes = {
buttonText: PropTypes.string,
onPress: PropTypes.func.isRequired,
style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
PropTypes.number,
]),
}

56. <View style={styles.buttonAlign}>
<AddButton
style={styles.addButton}
buttonText="Add a Message"
onPress={() =>
this.onAddMessageButtonPress()}
/>
</View>

58. The Bad.

59. Cross-Plahorm Oddi.es
and Irrita.ons

60. Fonts

61. Picker

62. Developing for Android

63. Op.onal: Javascript

64. Docs

65. Pace of React Na.ve Releases
(But it’s geing be`er!!!)

67. The Awesome.

68. Fetch
h`ps://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

69. 🐶

70. fetchMessages() {
const url = 'http://localhost:3000/messages';
fetch(url, {
method: 'GET',
})
.then((response) => response.json())
.then((json) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(json)
});
})
.catch(error => {
console.log(error);
Alert.alert(
'Refresh Failed',
'An error occurred while retrieving messages.',
[
{text: 'OK'}
]
);
});
}

71. fetchMessages() {
const url = 'http://localhost:3000/messages';
fetch(url, {
method: 'GET',
})
.then((response) => response.json())
.then((json) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(json)
});
})
.catch(error => {
console.log(error);
Alert.alert(
'Refresh Failed',
'An error occurred while retrieving messages.',
[
{text: 'OK'}
]
);
});
}

72. JSON

73. No parsing necessary.

74. It is the thing you want already.

75. Excep.on:
Extrac.ng Per.nent Data

76. Flexbox
h`ps://facebook.github.io/react-na.ve/docs/flexbox.html

77. Redux

78. Refreshing app in iOS Simulator
with CMD-R

79. Automa.c Refresh!

80. Docs:
Run This Example

82. The Elephant in the Room

84. Why?

85. Why should I care?

86. Who is this for?

87. Should I use it?

89. But seriously…

90. Who are your users?

91. Who are your clients?

92. Who are their customers?

95. Side note…

97. Who are their customers?

99. To learn more…

100. React Na.ve Docs
h`ps://facebook.github.io/react-na.ve/docs/geing-started.html
Paul Hudson - Going Na.ve with React
h`ps://forwardcourses.com/workshops/64
Tim Garcia - React Na.ve: Mobile Apps Without SwiV
Free trial at Forward Courses!

102. Evan K. Stone
web: h<p://www.cloudcity.io
cloud city blog: h<p://blog.cloudcity.io
blog: h<p://www.interac?velogic.net
twi<er: @interac?vlogic

103. h`p://www.iosdevbreak.com
iOS Dev Break Podcast
Twi`er: @iOSDevBreak
Subscribe on iTunes/Overcast: iOS Dev Break