DANIEL GRAHAM

N A V I G AT I O N R E A C T
N AT I V E
G E T T I N G S TA R T E D W I T H R E A C T
N A V I G AT I O N

• npm install --save react-navigation

• https://reactnavigation.org/docs/en/getting-
started.html
 S TA C K N A V I G AT O R
THINK BACK BUTTON IN YOUR BROWSER

SCREEN SCREEN SCREEN

1 2 3

By default the stack navigator is configured to have the familiar iOS and
Android look & feel: new screens slide in from the right on iOS, fade in from
the bottom on Android. On iOS the stack navigator can also be configured
to a modal style where screens slide in from the bottom.
N O M E N C L AT U R E

• Screens

• JSX component that gets rendered

• Routes

• Name JSX Component screen pairs

• https://snack.expo.io/@react-navigation/hello-react-
navigation-v3
 L E T S C R E AT E A N E W S C R E E N T O
N A V I G AT E T O

import React from 'react';

import {View, Text} from 'react-native'
export default class PlayerScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>PlayerScreen</Text>
</View>
);
}
}

T H I S W I L L E V E N T U A L LY B E C O M E T H E
S C R E E N T H AT P L AY S T H E P O D C A S T
S TA C K N A V I G AT O R E N T R I E S

createStackNavigator({
// For each screen that you can navigate to, create a new entry like this:
Profile: {
// `ProfileScreen` is a React component that will be the
// main content of the screen.
screen: ProfileScreen,
},
...MyOtherRoutes,
});
 M O D I F Y I N G T H E E N T R Y P O I N T ( A P P. J S )

import React from 'react'

import { createStackNavigator, createAppContainer } from 'react-navigation'
import HomeScreen from './components/HomeScreen'
import PlayerScreen from './components/PlayerScreen'

const RootStack = createStackNavigator(

{
Home: HomeScreen, NOTICE BAR
Player: PlayerScreen,
},
{
initialRouteName: 'Home',
}
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {

render() {
return (<AppContainer />)
}
}
 MOVING BETWEEN SCREENS

PA R A D I G M O N T H E W E B

<a href="details.html">Go to Details</a>

<a onClick={() => { document.location.href = "details.html"; }}>Go to Details</a>

PA R A D I G M O N I N R E A C T N A V I G AT I O N

<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
 <Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>

• this.props.navigation: the navigation prop is passed in

to every screen component (definition) in stack
navigator

• navigate('Details'): we call the navigate function with

the name of the route that we'd like to move the user
to.
 <Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>

• If you already on the details calling navigation will not

do anything

<Button
title="Go to Details... again"
onPress={() => this.props.navigation.push('Details')}
/>

• However you might want another details screen that

shows details about another item.
(Many with some unique data: params or redux.
P R O G R A M M AT I C A L LY G O I N G B A C K

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

<Text>Details Screen</Text>
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.push('Details')}
/>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
S N A C K O N R E A C T N A V I G AT I O N

• https://snack.expo.io/@react-navigation/going-back-
v3
A D D I N G N A V I G AT I O N T O P O D C A S T

<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Player')}}>
<Featured/>
</TouchableOpacity>
STYLING SUPPORT
Configuring the Header

class HomeScreen extends React.Component {

static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerRight: (
<Button ADDED
onPress={() => alert('This is a button!')}
title="Info" BUTTON
color="#fff" RIGHT
/>
),
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}

https://snack.expo.io/@professorxii/aGVhZG
N A V I G AT I O N L I F E C Y C L E
• What happens to the Home Screen when you navigate
away from it?

• Excepted behavior

SCREEN SCREEN
1 3
2

1 COMPONENTWILLUNMOUNT

H O W E V E R T H E B E H AV I O R
2 COMPONENTDIDMOUNT
I S M O R E C O M P L I C AT E D
 componentDidMount B
componentDidMount A SCREEN SCREEN
A B

Remains Mounted componentWillUnMount B

S TA C K

A Still on stack so
Unmount is not called A
• willFocus - the screen will focus

• didFocus - the screen focused (if there was a transition,

the transition completed)

• willBlur - the screen will be unfocused

• didBlur - the screen unfocused (if there was a

transition, the transition completed)
const didBlurSubscription = this.props.navigation.addListener(
'didBlur',
payload => {
console.debug('didBlur', payload);
}
);

// Remove the listener when you are done

didBlurSubscription.remove();
PA S S I N G PA R A M S
 PA S S PA R A M E T E R T O S C R E E N

this.props.navigation.navigate('RouteName', { /* params go here */ })

R E A D PA R A M E T E R

this.props.navigation.getParam(paramName, defaultValue)
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
</View>
);
}
}

READING THE PROPERTIES IN THE SUBVIEW

/* 2. Get the param, provide a fallback value if not available */

const { navigation } = this.props;
const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value');
TA B N A V I G AT I O N
H T T P S : / / S N A C K . E X P O . I O / @ R E A C T-
N A V I G AT I O N / B A S I C - TA B S - V 3
 U P D AT E I M P O R T
import React from 'react';
import {createBottomTabNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './components/HomeScreen';
import PlayerScreen from './components/PlayerScreen'

const rootStack = createBottomTabNavigator({

Home: HomeScreen,
Player: PlayerScreen
},{ U P D AT E T O TA B N A V I G AT O R
initalRouteName: 'Home'
}
)

const AppContainer = createAppContainer(rootStack)

export default class App extends React.Component {

render() {
return (
<AppContainer/>
);
}
}
Adding Icons to the tab navigator

export default createAppContainer(

createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) =>
getTabBarIcon(navigation, focused, tintColor),
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
) LETS EXPLORE G E T TA B B A R I C O N
);
import { Ionicons } from '@expo/vector-icons'; // 6.2.2

const getTabBarIcon = (navigation, focused, tintColor) => { https://ionicons.com

const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName; $ S Y N TA X I S N E W
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`; IT JUST DOES
// We want to add badges to home tab icon C O N C AT E N AT I O N
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}

// You can return any component that you like here!

return <IconComponent name={iconName} size={25} color={tintColor} />;
};
const HomeIconWithBadge = props => {
// You should pass down the badgeCount in some other ways like context, redux, mobx or event emitters.
console.log(props)
return <IconWithBadge {...props} badgeCount={3} />;
};

S P R E A D AT T R I B U T E S

A L L O W S Y O U PA S S A V A R I A B L E N U M B E R O F V A R I A B L E S

Think of the example of summing variable number of

numbers for lecture 2
D R A W N A V I G AT I O N
 U P D AT E T O D R A W N A V I G AT O R
import React from 'react';
import {createDrawerNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './components/HomeScreen';
import PlayerScreen from './components/PlayerScreen'

const rootStack = createDrawerNavigator({

Home: HomeScreen,
Player: PlayerScreen
},{ U P D AT E T O D R A W N A V I G AT O R
initalRouteName: 'Home'
}
)

const AppContainer = createAppContainer(rootStack)

export default class App extends React.Component {

render() {
return (
<AppContainer/>
);
}
}
N A V I G AT I O N D R A W
HELPER FUNCTIONS
N A V I G AT I O N D R A W

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
this.props.navigation.toggleDrawer();
import * as React from 'react'
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'

export default class Header extends React.Component{

constructor(props){ ADDED MENU ICON
super(props)
} CALL TO TOGGLE DRAW

render(){
return(
<View style={styles.container}>
<TouchableOpacity onPress={()=>{this.props.navigation.toggleDrawer()}}>
<Image style={styles.menuIcon} source={require('../assets/
menuIcon.png')}/>
</TouchableOpacity>
<Text style={styles.title}> Featured</Text>
<Image style={styles.searchIcon} source={require('../assets/
searchIcon.png')} />
</View>
)
}

N E E D T O PA S S N A V I G AT I O N P R O P E R T Y T O C H I L D E L E M E N T S

<Header navigation={this.props.navigation}/>
O T H E R N A V I G AT I O N F E AT U R E

Persistent state. We then user open the APP

Start back where they left off
<AppContainer persistenceKey={"NavigationState"} />

Screen Can be other AppContainers:

You can nest navigators in this way
MODAL VIEW
N A V I G AT I O N
F O R M O R E D E TA I L O N
S T Y L I N G T H E N A V I G AT I O N

https://reactnavigation.org/docs/en/headers.html