Introduction to React Native Workshop

September 2018
Introduction to

React Native
Nacho Martín

Nacho Martin
I write code at Limenius.
We build tailor-made projects,
and provide consultancy
and formation.
We are very happy with React and React Native.

https://github.com/Limenius/workshop-react-native.git
Before we start
🙏
Please go to where you have cloned the repo
of the project
And run git fetch

Goal of the workshop
To be able to estimate how long would
it take you to create a ﬁrst React Native
project (and if you would enjoy it)

Roadmap:
What is React Native
Starting a project
Working with Styles
Layout
Lists
Navigation
Networking
Touching the native side

Fundamental premise of React
Give me a state and a render() method
that depends on it and forget about
how and when to render.

render() {
return (
<div className="App">
<button onClick={this.tick}>Click me!</button>
<span>Clicks: {this.state.count}</span>
</div>
)
}

render() {
return (
</div>
)
}
render() {
return (
<View style={…}>
<Button onPress={this.tick}>Click me!</Button>
<Text>Clicks: {this.state.count}</Text>
</View>
)
}

render() {
return (
</div>
)
}
render() {
return (
<View style={…}>
<Button onPress={this.tick}>Click me!</Button>
<Text>Clicks: {this.state.count}</Text>
</View>
)
}
React Native

How is this possible
Reconciliation
Determines what parts
of the tree have changed

Reconciliation
Rendering
Actually
updates the app

Reconciliation
Rendering
Actually
updates the app
We can have several
renderers

React targets
Main
react-dom react-native
Web iOS android

React targets
Main
Web iOS android
But also

React targets
Main
Web iOS android
But also
react-art react-canvas react-three ReactLibertyreact-worker-dom

React targets
Main
Web iOS android
But also
react-konsul raxreact-native react-blessedreact-tvml

React targets
Main
Web iOS android
But also
React-GLreact-vr react-hardware react-fs-renderer react-x11

React targets
Main
Web iOS android
But also
redocx react-titanium React-Gibbon react-pdf react-test-renderer

React targets
Main
Web iOS android
But also
ink react-sketchapp

React targets
Main
Web iOS android
But also
ink react-sketchapp
And more

How Native is React Native?
JS Thread
Business logic &
Description of what
components to render

JS Thread Main Thread
UI manipulation
with native
components
Business logic &
Description of what

JS Thread Main Thread
UI manipulation
with native
components
Business logic &
Description of what
Bridge

How much code can we reuse?
Tip: if you develop in one platform,
test the app in the other from time to time
70%? 80%? 90%?

Option 1: create-react-native-app
$ npm install -g create-react-native-app
$ create-react-native-app AwesomeProject

Option 1: create-react-native-app
Only JS, no iOS or Android code
(outside node_modules)
If you want to modify native code, $ npm run eject
Uses the Expo app to test in real device
Meant to have a quick way of trying
react-native

Option 2: react-native init
$ npm install -g react-native-cli
$ react-native init AwesomeProject

Option 2: react-native init
Complete project with native code
More control
Needed to use things like CodePush
Doesn’t need external tools to publish to
the store

git clone https://github.com/Limenius/workshop-react-native.git
You are supposed to have done this
🙏
And then yarn install

git checkout master
react-native run-ios
And then
Or
react-native run-android

Debug tools Cmd + d
(Cmd + r)
ctrl+m / cmd+m

Play around
Open app/App.js with an editor
<Text style={styles.welcome}>Hi there!</Text>Change the text in
Try nesting
<Text>
<Text style={styles.welcome}>Hi there!</Text>
Amigo
</Text>
Try changing some styles
welcome: {
fontSize: 100,
textAlign: 'center',
margin: 10,
},
Try placing a console.log(‘hi’) before return(… and see it in
Chrome dev tools
https://www.slideshare.net/nachomartin/react-native-workshop-react-alicante

Familiarize with errors
What happens if we…
remove a closing tag (</View>)
<View style={styles.container}>
Hi there!
</View>
put text not wrapped in <Text/>
try to comment a JSX line with //
return (
<View style={styles.container}>
<Text style={styles.welcome}>Hi there!</Text>
</View>
<View/>
)
have two root elements
use wrong properties for styles ( rename ﬂex -> ﬂexo )
remove the words export default

git checkout elements
git reset HEAD --hard
(To discard your changes)

Exercise:
Play with the basic components
app/App.js

Exercise: Build new components
Can you build a new component combining others?
Ideas: Image with footer (<Text/>), two buttons that display diﬀerent alerts
Can you pass props to that component?
Ideas: Pass the text of the footer with props, pass also the image, pass the titles of the buttons
Can your build a component with local state?
Ideas: Modify the counter to have a “minus 1” button

No CSS. Everything is JS
<View style={{
borderLeftColor: Colors.accent,
borderLeftWidth: 9,
backgroundColor: Colors.backgroundSection,
padding: 18,
paddingVertical: 9,
}}>
No class
No dimensions in pixels
No things like padding: 19 9 3 1
camelCased
Use constants

StyleSheet
<View style={Styles.headline}>
const Styles = StyleSheet.create({
headline: {
borderLeftWidth: 9,
backgroundColor: Colors.backgroundSection,
paddingLeft: 18,
paddingRight: 18,
paddingTop: 9,
paddingBottom: 9,
},
})

Combination
<View style={[Styles.headline, {backgroundColor: 'red'}]}>
const Styles = StyleSheet.create({
headline: {
borderLeftWidth: 9,
paddingLeft: 18,
paddingRight: 18,
paddingTop: 9,
paddingBottom: 9,
},
})

git checkout styles

Our ﬁrst goal is to get this
(We will practice layouts in the next section)

components/MovieHeader.js
height: 210
fontWeight:‘bold’
fontSize: FontSizes.LargeTitle
48x48, rounded
backgroundColor: Colors.highlight
color: Colors.text
color: Colors.text
fontWeight:‘bold’
border: left, size 9, Colors.accent
padding: 9, 18
backgroundColor: Colors.backgroundSection

Exercise 1
84x84
Colors.text, bold
Container has: border at bottom size 1, Colors.subtleAccent
and background is 'white'
components/ListItemActor.js

Exercise 2
FontSizes.gigantic
Colors.background
Container has: a background with color: Colors.highlight
components/MainHeader.js
Image is 40x90
FontSizes.subhead
With weight ‘200’
Colors.background
Pro exercise:Think how would you add support for themes

Dimensions
import {
Dimensions,
} from 'react-native'
const windowSize = Dimensions.get('window')
mainImage: {
height: windowSize.height /3,
width: undeﬁned
},

Dimensions
import {
Dimensions,
mainImage: {
width: undeﬁned
},
Our image height depends on the
Height of the window
Use sparingly

Dimensions
import {
Dimensions,
mainImage: {
width: undefined
},
Our image height depends on the
Height of the window
Use sparingly
Exercise: Can you make another style dependant of
Dimensions?
What will happen if the device is rotated?
Can you find anything in the documentation to fix it?

Further reading
https://www.okgrow.com/posts/react-native-styling-tips
https://madebymany.com/stories/a-year-of-react-native-styling-part-1
https://medium.com/robin-powered/introducing-glamorous-for-react-native-1b8365e7f33f
https://github.com/styled-components/styled-components
Explore libraries to do CSS in JS

This is flexbox realm
flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
flexDirection: ‘column' flexDirection: ‘row’
(Default)

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
(Default)
main direction
crossdirection

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
(Default)
main direction
crossdirection
cross direction
maindirection

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
flexDirection: ‘column’
(Default)
‘flex-start’ ‘flex-end’ ‘center' ‘space-around’ ‘space-between’
flexDirection: ‘row’
(Default)
‘flex-start’ ‘flex-end’ ‘center' ‘space-around’ ‘space-between’

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
(Default)
‘flex-start’ ‘flex-end’ ‘center' ‘stretch’ ‘baseline’
(Default)
‘flex-start’ ‘flex-end’ ‘center' ‘stretch’ ‘baseline’

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
‘baseline’

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
alignSelf: ’end’

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
flex: 1
flex: 0
flex: 0

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
flex: 5
flex: 2
flex: 3

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
flex: 0.5
flex: 0.2
flex: 0.3

flexDirection
justifyContent
alignItems
alignSelf
flex
alignContent
flexBasis
flexGrow
flexShrink
flexWrap
flex: 25
flex: 10
flex: 15

git checkout layout

18
Exercise 1
app/components/ListItemActor.js

Exercise 2
Hint: create subviews if you need them
Optional: can you come up with a diﬀerent layout for any of our three components?
app/components/MainHeader.js

Further reading
https://facebook.github.io/yoga/docs/getting-started/
Docs:
https://github.com/jondot/ReactNativeKatas
Very good practice:

Naive lists, as in the web
export default class Movie extends Component {
constructor(props) {
super(props)
this.state = {
movie: movies.ﬁnd((movie) => movie.name === 'Pulp Fiction')
}
}
render() {
return (
<View>
<MovieHeader movie={this.state.movie}/>
{ this.state.movie.actors.map(actor => (
<ListItem key={actor} name={actor} image={actors[actor].image}/>
))}
</View>
)
}
}
app/components/Movie.js

Naive lists, as in the web
export default class Movie extends Component {
constructor(props) {
super(props)
this.state = {
movie: movies.ﬁnd((movie) => movie.name === 'Pulp Fiction')
}
}
render() {
return (
<View>
{ this.state.movie.actors.map(actor => (
<ListItem key={actor} name={actor} image={actors[actor].image}/>
))}
</View>
)
}
}
Important to help the reconciler do its work

Exercise
git checkout lists
Can you build a list of movies in
app/components/MovieList.js ?

FlatList
Highly optimized List component
Features:
• Scroll loading (onEndReached).
• Pull to refresh (onRefresh / refreshing).
• Conﬁgurable viewability (VPV) callbacks (onViewableItemsChanged / viewabilityConﬁg).
• Horizontal mode (horizontal).
• Intelligent item and section separators.
• Multi-column support (numColumns)
• scrollToEnd, scrollToIndex, and scrollToItem
• Better Flow typing.

FlatList
render() {
return (
<View>
<FlatList
data={this.state.movie.actors}
renderItem={({item}) =>
<ListItem name={item} image={this.state.actors[item].image}/>
}
/>
</View>
)
}

FlatList
What about the keys?
<FlatList
keyExtractor={item => item}
}
/>

FlatList
Scrolleable area
<FlatList
}
/>

FlatList
Desired scrolleable area

FlatList
Desired scrolleable area
<FlatList
ListHeaderComponent={<MovieHeader movie={this.state.movie}/>}
}
/>

Exercise
Can you use FlatList in
app/components/MovieList.js ?
git checkout ﬂatLists
item => item
reminder
In this case works as
function(item) {
return item
}
git reset HEAD —hard

Further reading
https://facebook.github.io/react-native/blog/2017/03/13/
better-list-views.html
Read the docs of the components:
FlatList
SectionList
VirtualizedList

Several options
StackNavigator TabNavigator DrawerNavigator Or combine them

Let’s do it
git checkout navigation

Let’s do it
const App = createStackNavigator({
Home: { screen: MovieList },
Movie: { screen: Movie },
}, {
navigationOptions: {
headerTintColor: Colors.accent,
headerStyle: Styles.header,
}
})
app/App.js

Let’s do it
}, {
}
})
app/App.js
export default class MovieList extends Component {
static navigationOptions = {
title: 'Movies',
}
//…
app/components/MovieList.js

Let’s do it
}, {
}
})
app/App.js
export default class MovieList extends Component {
static navigationOptions = {
title: 'Movies',
}
//…
<FlatList
data={this.state.movies}
ListHeaderComponent={<MainHeader/>}
keyExtractor={item => item.name}
<TouchableHighlight
underlayColor={Colors.subtleAccent}
activeOpacity={0.5}
onPress={() => navigate('Movie', {name: item.name})}
>
<View>
<ListItem name={item.name} image={item.image}/>
</View>
</TouchableHighlight>
}
/>
In render()

Exercise
Can you make a navigation transition from Movie to
app/components/Actor ?
Steps:
- Declare the screen in app/App.js
- Use a TouchableHighlight to capture onPress in the actors
list of <Movie/>
- Provide an appropriate title in <Actor/>
- Make the actor displayed based on
props.navigation.state.params.name
Optional: have a look at
https://reactnavigation.org/docs/en/stack-navigator.html
And tweak the navigation (Ideas: mode modal, add something to headerRight)

Networking
React-native uses the Fetch API
If you already know it, you are all set 🎉

Let’s do it
componentDidMount() {
return fetch(baseUrl + '/movies')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
movies: responseJson,
})
})
.catch((error) => {
console.error(error);
})
}

Let’s do it
git checkout networking
yarn start-server
(or npm run start-server)

Further reading
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Docs:
https://github.com/mzabriskie/axios
Additional libraries:

Working with state
Not speciﬁc of React Native,
we just use what we know of React

Let’s do it
git checkout interactive

Cases where it is needed
Installing packages that have a native side
Making our own changes or components
Installing assets, such as fonts
…

Let’s do it
"rnpm": {
"assets": ["./assets/fonts/"]
}
package.json
git checkout mod-native
(Expo users: https://docs.expo.io/versions/latest/guides/using-custom-fonts)

Let’s do it
"rnpm": {
"assets": ["./assets/fonts/"]
}
package.json
react-native link
git checkout mod-native
(Expo users: https://docs.expo.io/versions/latest/guides/using-custom-fonts)

Assets linked
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
new file: android/app/src/main/assets/fonts/OleoScript-Bold.ttf
new file: android/app/src/main/assets/fonts/OleoScript-Regular.ttf
modified: ios/travolta.xcodeproj/project.pbxproj
modified: ios/travolta/Info.plist
modified: package.json

Summary:
What is React Native
Starting a project
Working with Styles
Layout
Lists
Navigation
Networking
Touching the native side

Thanks! @nacmartin
nacho@limenius.com

Introduction to React Native Workshop

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Introduction to React Native Workshop

Semelhante a Introduction to React Native Workshop (20)

Mais de Ignacio Martín

Mais de Ignacio Martín (16)

Último

Último (20)

Introduction to React Native Workshop