Slide 1
Slide 1 text
It (mostly) just works!
React Native for
Better Apps
Gian Marco Toso
@gianmarcotoso gianmarcotoso gianmarcotoso.com polarityb.it
Software Engineer, The One Who Knocks
Slide 2
Slide 2 text
About Me
Software Engineer from Turin, Italy
MSc in Computer Engineering
Researcher and Freelancer
Slide 3
Slide 3 text
About My Stack
Docker
PHP/Laravel
"It was working on my machine!"
The monolith is here to stay
NodeJS/TypeScript
Seriously, it's awesome!
React + Redux
The Flux Capacitor!
(formerly) iOS/ObjectiveC
and I still get nightmares
Slide 4
Slide 4 text
Mobile Applications
Very popular, with a huge market
All the cool kids are developing them
Slide 5
Slide 5 text
Native Applications
A nightmare to develop
A lot of devices
A lot of resolutions
Different operating systems with different rules
Different programming languages
Slide 6
Slide 6 text
Hybrid Applications
Write Once, Run Anywhere!
One language (JavaScript)
One runtime environment (the WebView)
Less than ideal UI performance
Slide 7
Slide 7 text
React Native
UI written with ReactJS
Modern JavaScript Code
Native extensions are bridged to JavaScript
UI Components are mapped to native components
Apps written with React Native are real native apps!
Slide 8
Slide 8 text
An Example
import React from 'react'
import { View, Text, AppRegistry } from 'react-native'
class HelloWorld extends React.Component {
render() {
return (
Hello, World!
)
}
}
AppRegistry.registerComponent('app', () => HelloWorld)
Slide 9
Slide 9 text
CLI Tool
React Native comes with a command line utility that can
be installed with `yarn install react-native-cli`
The CLI tool can be used to create new projects (`react-
native init`) or to run them (`react-native run-*`)
In order to run a React Native project on a specific
platform, you'll need to have the proper SDK installed!
Slide 10
Slide 10 text
Styling
Inline Styles
Flexbox Algorithm
CSS-Like syntax
Styles can be defined as POJOs
Styles should be defined using the StyleSheet class
Slide 11
Slide 11 text
An Example
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
titleText: {
fontSize: 72
},
red: {
color: 'red'
}
})
const HelloWorld = () => (
Hello, World!
)
export default HelloWorld
Slide 12
Slide 12 text
Built-in Components
React Native has many built-in component to handle
common operations
Most components are compatible with both supported
platforms
Slide 13
Slide 13 text
TouchableHighlight
The TouchableHighlight component allows anything to
be able to handle touch events
Can be used to wrap most components
Exposes an `onPress` method that receives an Event Handler
Slide 14
Slide 14 text
TouchableHighlight
import React from 'react'
import { TouchableHighlight, View, Image, Text } from 'react-native'
class TouchableCard extends React.Component {
handleCardTouch = () => {
this.props.onCardTouched()
}
render() {
return (
Some Fancy Image
)
}
}
export default TouchableCard
Slide 15
Slide 15 text
Modals
The Modal component can wrap a View and all its
content and present it modally whenever required
A Modal will become visible as soon as its visible prop
becomes true, and will disappear when it becomes false
It's possible to change the animation used to show the
modal by setting the animationType to either fade, slide or
none
Slide 16
Slide 16 text
Modals
import React from 'react'
import { View, Modal, Text, Button } from 'react-native'
class ModalContainer extends React.Component {
state = { isModalVisible: false }
render() {
Hello, Modal!
this.setState({isModalVisible: false})}
/>
this.setState({isModalVisible: true})}
/>
}
}
Slide 17
Slide 17 text
StatusBar
The StatusBar component allows to configure the
behavior of the mobile OS' status bar
It can be included in any screen in order to have different
styles for different pages
Slide 18
Slide 18 text
StatusBar
import React from 'react'
import { StatusBar, View } from 'react-native'
class MyFancyPage extends React.Component {
render() {
return (
{/* Page content... */}
)
}
}
Slide 19
Slide 19 text
ListView
The ListView component allows to create scrollable
views containing items of the same type
The component uses a DataSource to populate itself on
every render
It also uses a callback to decide how to render each row,
and it's highly configurable
Slide 20
Slide 20 text
ListView
class MyComponent extends Component {
constructor() {
super()
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
};
}
render() {
return (
{rowData}}
/>
);
}
}
Slide 21
Slide 21 text
Navigation
The Navigator Component allows to handle navigation
Navigation is handled through the use or routes and a
navigation stack.
When a route is matched, a specific component is
returned.
Navigation is handled through the use or routes and a
navigation stack.
Slide 22
Slide 22 text
Navigation
const routes = [
{ key: 'home', title: 'Home Screen', component: (p) => },
{ key: 'login', title: 'Login', component: (p) => },
]
const Home = ({navigator}) => (
navigator.push('login')} title="Login" />
)
const renderRoute = (route, navigator) => (
routes.find(r => r === route.key)
.component({navigator})
)
const NavigationStack = () => (
)
export default NavigationStack
Slide 23
Slide 23 text
NavigationBar
The Navigator.NavigationBar allows to create a
Navigation Bar, persistent across scenes
It allows to define the Left and Right buttons behavior, as
well as the Title
Slide 24
Slide 24 text
NavigationBar
import React from 'react'
import { Navigator, Text, Button } from 'react-native'
const LeftButton = (route, navigator, index, navState) => (
navigator.pop()} />
)
const RightButton = (route, navigator, index, navState) => {}
const Title = (route, navigator, index, navState) => (
{route.title}
)
const Navbar = () => (
)
// Passed to the `navigationBar` prop of the `Navigator`
export default Navbar
Slide 25
Slide 25 text
Navigation
The Navigator Component is less than ideal
Configuring navigation this way is hard, cumbersome
and error prone
You need a way to pass the `navigator` object around if
you want to do anything useful
The Navigator component is being deprecated, along
with its newer alternative NavigatorExperimental
The official recommended replacement is a third party
library called React Navigation
Slide 26
Slide 26 text
Built-in Modules
React Native has many built-in modules to handle
operations common to mobile devices
Most modules are compatible with both supported
platforms
Module actions are called imperatively
Slide 27
Slide 27 text
Vibration
The Vibration module makes the phone vibrate using
the specified pattern.
The pattern can be repeated any number of times
import { Vibration } from 'react-native'
Vibration.vibrate(
[0, 100], // pattern
1 // repeat
)
Slide 28
Slide 28 text
Alert
The Alert module shows a popup dialog box with
confirmation buttons
Each button can have an `onPress` event handler
import { Alert } from 'react-native'
Alert.alert(
'Confirm?'
'Do you confirm this action?',
[
{ title: 'Yes', onPress: () => {} },
{ title: 'No', onPress: () => {}, style: 'cancel' },
]
)
Slide 29
Slide 29 text
AppState
The AppState module tells us if the app is in the
background, foreground or inactive state.
It can be listened to by using the
addEventListener method
import { AppState } from 'react-native'
let state = 'background'
AppState.addEventListener('change', (newState) => {
state = newState
})
Slide 30
Slide 30 text
Dimensions
Sometimes it can be useful to know the dimensions of
either the screen or the window.
The Dimensions module comes to our aid, by allowing
to read dimensions at any time
import { Dimensions } from 'react-native'
const { height, width } = Dimensions.get('window')
const myStyle = {
height, width
}
const myComponent = ({children}) => {children}
// This will soon be possible (not yet!):
Dimensions.addEventListener('change', ({window, screen}) => {
console.log('new dimensions:', window, screen)
})
Slide 31
Slide 31 text
JavaScript Ecosystem
A React Native app's code is written in JavaScript
This means you can use most of the libraries you're used to!
Redux
Axios
Fetch
LocalForage
Lodash
RxJS
Slide 32
Slide 32 text
Third Party Components
You'll find many third-party libraries and components
online
Some are even recommended by the React Native core
team, like AirBnB's ` `
react-native-maps
Slide 33
Slide 33 text
Animations
Animations are a big part of a Mobile Application's UX
React Native makes animating components somewhat
easy with the Animated module
Slide 34
Slide 34 text
Animations
The Animated module exposes replacement
components View, Image and Text
These components' style prop can receive instances of
the Animated.Value class instead of regular numbers
Animation functions such as timing or spring can be
used to animate Animated.Values smoothly
Slide 35
Slide 35 text
Animations
import React from 'react'
import { Text, Animated, Easing } from 'react-native'
const _opacity = new Animated.Value(1)
const changeOpacity = (value = 0) => {
Animated.timing({
toValue: value,
delay: 1000,
easing: Easing.inOut(Easing.ease)
}).start( () => changeOpacity((value + 1) % 2) )
}
class Wobble extends React.Component {
componentDidMount = () => changeOpacity()
render() {
return (
Wobble!
)
}
}
export default Wobble
Slide 36
Slide 36 text
React Native Web
Third-party library to render React Native apps inside a
web browser
Maps React Native's primitives to standard HTML tags
Allows to debug an App in the browser where possible -
there is no support for mobile-specific functionalities!
Not really production ready
Slide 37
Slide 37 text
React Native Windows
Third party module that allows to deploy React Native
apps on the Universal Windows Platform
Maps React Native components to native C# primitives
Still under development, YMMV
Slide 38
Slide 38 text
The End
Thank you!
@gianmarcotoso