This document provides an overview of navigation options and best practices for React Native applications. It discusses the Navigator API, common navigation libraries like React Navigation and React Native Router Flux, and how to structure navigation within a React/Redux project using components, actions, and reducers. It also covers animations, drawer navigation, and common caveats to consider with lists and preserving internal state.

1. React Native
navigation

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

3. What has been
changed since
previous lecture?

4. 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

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

6. 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: ...},
]}
/>

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

8. 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

9. Project
structure

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

11. General structure
Entry point
Router
Component
Component Actions
Store
Reducers

12. General structure
Entry point
Router
Component
Component Actions
Store
Reducers

14. index.android[ios].js

15. General structure
Entry point
Router
Component
Component Actions
Store
Reducers

17. Router

18. General structure
Entry point
Router
Component
Component Actions
Store
Reducers

20. Component

21. General structure
Entry point
Router
Component
Component Actions
Store
Reducers

23. Action creator

24. General structure
Entry point
Router
Component
Component Actions
Store
Reducers

27. General structure
Entry point
Router
Component
Component Actions
Store
Reducers

29. Store

30. Project structure

31. Micro intro to
Animations

32. API
1. Animated API
2. LayoutAnimation

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

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

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

36. Navigation

37. 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)

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

39. Navigator API

40. Navigator API

41. Navigation Bar

42. Drawer

43. Actions

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

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

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

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

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

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

50. React Navigation
(community edition)

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

52. Router

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

54. 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>
),
}),
}

55. React Native Redux Router

56. 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>

57. 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>

58. React Native Router Flux

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

60. 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>

61. 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.tab2(); }} title='Switch to tab2'></Button>
<Button onPress={() => { drawer.close(); Actions.tab3(); }} title='Switch to tab3'></Button>
<Button onPress={() => { drawer.close(); Actions.tab4(); }} title='Switch to tab4'></Button>
<Button onPress={() => { drawer.close(); Actions.tab5(); }} title='Switch to tab5'></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>
}

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

63. React Native Navigation

64. However

65. Pros
1. Airbnb

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

67. Questions?

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

69. Thanks!