Oliver Shaw github.com/Olliepop oshaw.co/react-native/slides.pdf - PowerPoint PPT Presentation

Oliver Shaw github.com/Olliepop oshaw.co/react-native/slides.pdf

“Learn once, write anywhere”

No HTML or CSS

100% JavaScript

What’s behind a React Native app ES6 ● JSX ● Basic React concepts: component lifecycle, state, props ●

“React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.”

ScrollView Text “Component that wraps platform ScrollView while A React component for providing integration with touch locking "responder" displaying text. system.” A scrolling container.

Layout & styles Abstraction of CSS provided called StyleSheet ● Implements Flexbox ● Most components have a style property ● Available styles well documented in RN docs ● oblador/react-native-animatable provides declarative transitions ●

Fonts

Navigation JavaScript implementation of the navigation stack ● Trending router aksonov/react-native-router-flux ●

Module: react-native-router-flux (RNRF) BYO reducer -- you aren’t locked into flux ● Comes with customisable tab bar & nav bar ● Maintains a fork of the latest stable Navigator component ●

Storage & persistence Native key-value storage component AsyncStorage ● Android uses RocksDB or SQLite ● AsyncStorage plugs into rt2zz/redux-persist ● File system access provided by johanneslumpe/react-native-fs ●

“A library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps”

Optimising a Cordova app