Academy PRO: React native - navigation

Contents
1. Introduction
2. Building first scenes
3. Navigation/Swiping
4. Performance/Animations
5. Sockets/Push notifications/Building application/Send to market
6. ?

What has been
changed since
previous lecture?

VirtualizedList
Scroll loading (onEndReached).
Pull to refresh (onRefresh / refreshing).
Horizontal mode (horizontal).
Intelligent item and section separators. (sticky items are buggy)
scrollToEnd, scrollToIndex, and scrollToItem

Flat List
<FlatList
data={[{title: 'Title Text', key: 'item1'}, ...]}
renderItem={({item}) => <ListItem title={item.title} />}
/>

SectionList
<SectionList
renderItem={({item}) => <ListItem title={item.title}}
renderSectionHeader={({section}) =>
<H1 title={section.key} />}
sections={[ // homogenous rendering between sections
{data: [...], key: ...},
{data: [...], key: ...},
{data: [...], key: ...},
]}
/>

Heterogeneous
<SectionList
sections={[ // heterogeneous rendering between sections
{data: [...], key: ..., renderItem: ...},
]}
/>

Caveats
Internal state is not preserved
In order to constrain memory and enable smooth scrolling, content is
rendered asynchronously offscreen.
By default, the list looks for a key prop on each item and uses that for the
React key

React + Redux
1.Component
2.Actions
3.Reducers
4.Store

General structure
Entry point
Router
Component
Component Actions
Store
Reducers

API
1. Animated API
2. LayoutAnimation

What’s cool?
1. Non-blocking UI
2. Uses native driver
3. Old

What’s bad?
1. Not all things are a animated using driver (flex, position)

LayoutAnimation
1. Globally configured animations
2. Less control than Animated API

Navigation
1. Native-navigation (https://github.com/airbnb/native-navigation/) [1200+]
2. React-Native-Redux-Router (https://github.com/aksonov/react-native-redux-
router) [~350]
3. React-Native-Router-Flux (https://github.com/aksonov/react-native-router-
flux) [~4000]
4. React-Native-Navigation (https://github.com/wix/react-native-navigation/)
[~2500]
5. Navigator API (https://facebook.github.io/react-native/docs/navigator.html)
6. React Navigation (https://github.com/react-community/react-navigation)

Includes
1. Routing
2. Drawer
3. Tabs
4. Navigation bar

Pros
1. Quick
2. Old
3. Native drawer, easy to start

Cons
1. Old (before animated library)
2. Messy
3. Does not feel native (bad designed)

iOSNavigator
1. Looks native
2. Wrapper around native code
3. Fast and optimised
4. Old

NavigationExperimental (2016)
1. Uses Animated library
2. That’s all

Used in:
1. React-native-router-flux
2. Ex-navigation
3. react-router-native

Cons
1. Only views
2. Requires a lot of boilerplates
3. Will be deprecated

React Navigation
(community edition)

What’s cool?
1. Really fast
2. Supported by community
3. EEEEEAAASSSSSYYY
4. Native look-like components (Drawer, Tabs)

Actions
const { navigate } = this.props.navigation;
<TouchableOpacity style={styles.row} onPress={() => {
navigate('KeyResult', {data: item}); }}>

Drawer
static navigationOptions = {
drawer: () => ({
label: 'Home'
}),
title:'Objectives',
header: ({ state, setParams, navigate }) => ({
// Render a button on the right side of the header
// When pressed switches the screen to edit mode.
left: (
<TouchableOpacity onPress={() => navigate('DrawerOpen') }>
<Image
source={require('../resources/ic_menu_white_24dp.png')}
style={[styles.icon, {tintColor: '#333'}]}
/>
</TouchableOpacity>
),
}),
}

React native redux router
<Router>
<Schema name="modal" sceneConfig={Animations.FlatFloatFromBottom} navBar={NavBarModal}/>
<Schema name="default" sceneConfig={Animations.FlatFloatFromRight} navBar={NavBar}/>
<Schema name="withoutAnimation" navBar={NavBar}/>
<Schema name="tab" navBar={NavBar}/>
<Route name="launch" component={Launch} initial={true} hideNavBar={true} title="Launch"/>
<Route name="register" component={Register} title="Register"/>
<Route name="home" component={Home} title="Home" type="replace"/>
<Route name="login" component={Login} schema="modal"/>
<Route name="register2" component={Register} schema="withoutAnimation"/>
<Route name="error" component={Error} schema="popup"/>
</Router>

Actions
<Button onPress={Actions.register}>Go to Register page</Button>
<Button onPress={Actions.register2}>Go to Register page without
animation</Button>
<Button onPress={()=>Actions.error("Error message")}>Go to Error
page</Button>

React Native Router Flux
1. Rely on NavigationExperimental (fork)
2. Drawer and tabs components

Router
<Scene
key="tab1"
title="Tab #1"
icon={TabIcon}
navigationBarStyle={{ backgroundColor: 'white' }}
titleStyle={{ color: 'white' }}
initial
>
<Scene
key="tab1_1"
component={Objectives}
title="Tab #1_1"
onRight={() => alert('Right button')}
rightTitle="Right"
/>
<Scene
key="tab1_2"
component={KeyResult}
title="Tab #1_2"
/>
</Scene>

Calling actions
<Button onPress={Actions.pop} title='Back'></Button>
<Button onPress={() => { drawer.close(); Actions.tab1(); }} title='Switch to tab1'></Button>
<Button onPress={() => { drawer.close(); Actions.echo(); }} title='push new scene'></Button>
{props.name === 'tab1_1' &&
<Button onPress={Actions.tab1_2}>next screen for tab1_1</Button>
}

Cons
1. Slow
2. Difficult to customize
3. Not good for production

Cons
1. Raw
2. V0.1
3. Not documented

Sources
https://bitbucket.org/RusinkaBogdan/react-routing

Academy PRO: React native - navigation

More Related Content

What's hot

Similar to Academy PRO: React native - navigation

More from Binary Studio

Recently uploaded

Academy PRO: React native - navigation