Academy PRO: React native - navigation
Download as PPTX, PDF1 like409 views
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.
![Flat List
<FlatList
data={[{title: 'Title Text', key: 'item1'}, ...]}
renderItem={({item}) => <ListItem title={item.title} />}
/>](https://image.slidesharecdn.com/reactnative-navigation-170620134355/85/Academy-PRO-React-native-navigation-5-320.jpg)
![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: ...},
]}
/>](https://image.slidesharecdn.com/reactnative-navigation-170620134355/85/Academy-PRO-React-native-navigation-6-320.jpg)
![Heterogeneous
<SectionList
sections={[ // heterogeneous rendering between sections
{data: [...], key: ..., renderItem: ...},
{data: [...], key: ..., renderItem: ...},
{data: [...], key: ..., renderItem: ...},
]}
/>](https://image.slidesharecdn.com/reactnative-navigation-170620134355/85/Academy-PRO-React-native-navigation-7-320.jpg)
![index.android[ios].js](https://image.slidesharecdn.com/reactnative-navigation-170620134355/85/Academy-PRO-React-native-navigation-14-320.jpg)
![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)](https://image.slidesharecdn.com/reactnative-navigation-170620134355/85/Academy-PRO-React-native-navigation-37-320.jpg)
![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>
),
}),
}](https://image.slidesharecdn.com/reactnative-navigation-170620134355/85/Academy-PRO-React-native-navigation-54-320.jpg)
Academy PRO: 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
- 11. General structure Entry point Router Component Component Actions Store Reducers
- 12. General structure Entry point Router Component Component Actions Store Reducers
- 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
- 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
- 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
- 64. However
- 65. Pros 1. Airbnb
- 66. Cons 1. Raw 2. V0.1 3. Not documented
- 67. Questions?
- 69. Thanks!