Nesta apresentação nós veremos um benchmark entre os principais componentes de navegação do React Native e as boas práticas para a implementação de uma árvore de navegação para as telas dos módulos do aplicativo utilizando React Navigation.

1. REACT NAVIGATION
MODULAR NAVIGATION

2. MODULAR NAVIGATION WITH REACT NAVIGATION
ROADMAP
▸ 1- Overview
▸ 2- Navigation Boilerplate
▸ 3- Nested Navigation
▸ 4- Go Back to Navigation Root
▸ 5- EXTRA - Status Bar Height Adjustment

3. OVERVIEW
REACT NAVIGATION

4. REACT NAVIGATION OVERVIEW
FEATURES
▸ Navigators
▸ Nested Navigators
▸ Redux Integration
▸ Web Integration
▸ Screen Tracking with Google Analytics
▸ Routers

5. REACT NAVIGATION OVERVIEW
PREREQUISITES
▸ React Native - Native Code
react-native init ProjectName
▸ React Native - Expo
create-react-native-app ProjectName

6. REACT NAVIGATION OVERVIEW
INTRODUCTION
▸ React Navigation is the result of a collaboration between
developers from Facebook, Expo and the React community at
large: it replaces and improves upon several navigation libraries
in the ecosystem, including Ex-Navigation, React Native's
Navigator and NavigationExperimental components.
▸ Release in late January 2017.
▸ Officially recommended navigation library for React Native in
September 2017.
▸ Expo has expressed that React Navigation v1.0 is priority.

7. REACT NAVIGATION OVERVIEW
DEV COMMUNITY BENCHMARKING

8. REACT NAVIGATION OVERVIEW
NAVIGATION LAB SCREEN FLOW

9. REACT NAVIGATION OVERVIEW
NAVIGATION LAB PROTOTYPE

10. BOILERPLATE
NAVIGATION

11. NAVIGATION BOILERPLATE
INSTALL PACKAGES
npm install react-native-elements —-save
npm install react-navigation —-save
"dependencies": {
"react-native-elements": "^0.17.0",
"react-navigation": "^1.0.0-beta.15"
}

12. NAVIGATION BOILERPLATE
FOLDERS AND FILES STRUCTURE
▸ Main
▸ Config
app navigation files
▸ Screens
app screen files
▸ Auth
▸ Config
auth navigation files
▸ Screens
auth screen files
▸ Modules
▸ Module
▸ Config
module navigation files
▸ Screens
module screen files

13. NAVIGATION BOILERPLATE
MAIN NAVIGATION BOILERPLATE
const MainTabNavigator = TabNavigator({
Welcome: { screen: WelcomeScreen },
Auth: { screen: ({ navigation }) => (
<AuthStackNavigation
navigation={{ root: navigation, ...navigation }}
/>
)},
Home: { screen: ({ navigation }) => (
<HomeTabNavigation
navigation={{ root: navigation, ...navigation }}
/>
)}
}, {
animationEnabled: false,
lazyLoad: true,
swipeEnabled: false,
navigationOptions: {
tabBarVisible: false
}
});

14. NAVIGATION BOILERPLATE
HOME NAVIGATION BOILERPLATE
const HomeTabNavigator = TabNavigator({
Home: { screen: ({ navigation }) => (
<HomeDrawerNavigation
navigation={{
root: this.props.navigation.root, ...navigation }}
/>
), navigationOptions: homeTabNavigationOptions },
Contacts: {
screen: ContactsStackNavigation,
navigationOptions: contactsTabNavigationOptions
},
Settings: {
screen: SettingsStackNavigation,
navigationOptions: settingsTabNavigationOptions
},
...
});

15. NAVIGATION BOILERPLATE
DRAWER NAVIGATION BOILERPLATE
const HomeDrawerNavigator = DrawerNavigator({
Home: { screen: ({ navigation }) => (
<HomeStackNavigation
navigation={{ root: this.props.navigation.root, ...navigation }}
/>
), navigationOptions: ({ navigation }) => ({
drawerLabel: 'Home',
drawerIcon: <Icon name='ios-home' type='ionicon' />
})},
Store: { screen: ({ navigation }) => (
<StoreStackNavigation
navigation={{ root: this.props.navigation.root, ...navigation }}
/>
), navigationOptions: ({ navigation }) => ({
drawerLabel: 'Store',
drawerIcon: <Icon name='ios-pricetags' type='ionicon' />
})},
...
});

16. NAVIGATION BOILERPLATE
MODULE NAVIGATION BOILERPLATE
const StoreStackNavigator = StackNavigator({
Store: {
screen: HomeScreen,
navigationOptions: {
title: 'Store',
headerLeft: (
<Icon
name='ios-arrow-back'
type='ionicon'
size={36}
style={{ marginLeft: 20 }}
onPress={() => this.props.navigation.goBack()}
/>
),
headerRight: <Icon name='ios-pricetags' type='ionicon'
style={{ marginRight: 20 }} />
},
},
Order: { screen: OrderScreen },
Pay: { screen: PayScreen }
});

17. NAVIGATION BOILERPLATE
SCREEN BOILERPLATE
export default
class ContactsScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Contacts',
headerRight:
<Icon
name='ios-contacts'
type='ionicon'
style={{ marginRight: 20 }}
/>
});
render() {
return(
<View />
)
}
}

18. NAVIGATION
NESTED

19. NESTED NAVIGATION
NAVIGATION HOME SCREEN STRUCTURE
HomeDrawerNavigatorMainTabNavigator
HomeTabNavigator HomeStackNavigator
HomeScreen

20. NESTED NAVIGATION
NAVIGATION TREE STRUCTURE
1-TabNavigator (Main)
WelcomeScreen
1.1-StackNavigator (Auth)
LoginScreen
RecoveryScreen
RegisterScreen
1.2-TabNavigator (Home)
1.2.1-DrawerNavigator (Home)
1.2.1.1-StackNavigator (Home)
HomeScreen
1.2.1.2-StackNavigator (Store)
HomeScreen
OrderScreen
PayScreen
1.2.1.3-StackNavigator (Service)
HomeScreen
RequestScreen
1.2.2-StackNavigator (Contacts)
ContactsScreen
1.2.3-StackNavigator (Settings)
SettingsScreen
1.2.4-StackNavigator (Search)
SearchScreen

21. NESTED NAVIGATION
CUSTOM ROOT NAVIGATION PROPS
export default class MainTabNavigation extends React.Component {
render() {
const MainTabNavigator = TabNavigator({
...
Main: {
screen: ({ navigation }) => (
<HomeTabNavigation
navigation={{
root: navigation,
...navigation
}}
/>
)
}
}
...

22. NESTED NAVIGATION
TAB NAVIGATION OPTIONS
const homeTabNavigationOptions = ({ navigation }) => ({
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<Icon
name={focused ? 'ios-home' : 'ios-home-outline'}
type='ionicon'
/>
)
});
const TabkNavigator = TabNavigator({
Home: {
screen: ({ navigation }) => (
<HomeDrawerNavigation
navigation={{ root: this.props.navigation.root, …navigation }}
/>
),
navigationOptions: homeTabNavigationOptions
}
}

23. NESTED NAVIGATION
DRAWER NAVIGATION OPTIONS
const HomeDrawerNavigator = DrawerNavigator({
Home: {
screen: ({ navigation }) => (
<HomeStackNavigation
navigation={{
root: this.props.navigation.root,
...navigation
}}
/>
),
navigationOptions: ({ navigation }) => ({
drawerLabel: 'Home',
drawerIcon: <Icon name='ios-home' type='ionicon' />
})
},

24. NESTED NAVIGATION
STACK NAVIGATION OPTIONS
const HomeStackNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
headerLeft: (
<Icon
name='ios-menu'
type='ionicon'
size={36}
style={{ marginLeft: 20 }}
onPress={() =>
this.props.navigation.navigate('DrawerOpen')}
/>
),
headerRight:
<Icon name='ios-home' type='ionicon'
style={{ marginRight: 20 }} />
...

25. NAVIGATION
ROOT
GO BACK

26. GO BACK TO NAVIGATION ROOT
NAVIGATION ACTIONS
▸ Navigate - Navigate to another route.
▸ Reset - Replace current state with a new state.
▸ Back - Go back to previous state.
▸ Set Params - Set Params for given route.
▸ Init - Used to initialize first if state is undefined.
import { NavigationActions } from ‘react-navigation’;
this.props.navigation.dispatch(
NavigationActions.reset({ params... })
);

27. GO BACK TO NAVIGATION ROOT
GO TO HOME AFTER LOG ON
<Button
raised
title='Login'
onPress={() =>
this.props.navigation.root
.navigate(‘Main’)
}
/>

28. GO BACK TO NAVIGATION ROOT
GO TO LOGIN AFTER LOG OFF
contentComponent: props => (
<ScrollView
...
<Button
title='Logout'
onPress={() => {
this.props.navigation.root
.dispatch(
NavigationActions.reset({
index: 0,
actions: []
})
);
this.props.navigation.root
.navigate(‘Auth');
}}
/>
...
</ScrollView>
)

29. GO BACK TO NAVIGATION ROOT
GO TO WELCOME AFTER YOU LEAVE
contentComponent: props => (
<ScrollView
...
<Button
title='Logout'
onPress={() => {
this.props.navigation.root
.dispatch(
NavigationActions.reset({
index: 0,
actions: []
})
);
this.props.navigation.root
.navigate(‘Welcome’);
}}
/>
...
</ScrollView>
)

30. MODULAR NAVIGATION WITH REACT NAVIGATION
EXTRA - ANDROID STATUS BAR HEIGHT ADJUSTMENT
import { Platform } from 'react-native';
import Expo from 'expo';
export default class HomeTabNavigation
extends React.Component {
render() {
const HomeTabNavigator = TabNavigator({
...
}, {
...
tabBarOptions: {
labelStyle: {
fontSize: 10
},
showIcon: true,
tabStyle: {
marginTop: Platform.OS === 'ios' ? 0
: Expo.Constants.statusBarHeight
}
}
});
return (
<HomeTabNavigator />
);
}
}

31. THANK YOU!
William Santos
@WilliamSantosRJ
william-santos-bwti/react-navigation-lab
Modular Navigation with React Navigation
React Rio Talk

32. QUESTIONS?
MODULAR NAVIGATION WITH REACT NAVIGATION