N AV I G AT I O N R E A C T N AT I V E

D A N I E L G R A H A M

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

• npm install --save react-navigation

• https://reactnavigation.org/docs/en/getting-started.html

S TA C K N AV I G AT O R

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.

S C R E E N 1

S C R E E N 2

S C R E E N 3

T H I N K B A C K B U T T O N I N Y O U R B R O W S E R

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 AV 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 AV 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, Player: PlayerScreen, }, { initialRouteName: 'Home', } );

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component { render() { return (<AppContainer />) } }

N O T I C E B A R

M O V I N G B E T W E E N S C R E E N S

<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 T H E W E B

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

<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" onPress={() => this.props.navigation.navigate('Details')} />

<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 AV I G AT I O N

• https://snack.expo.io/@react-navigation/going-back-v3

A D D I N G N AV I G AT I O N T O P O D C A S T

<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Player')}}> <Featured/> </TouchableOpacity>

S T Y L I N G S U P P O R T

Configuring the Header

class HomeScreen extends React.Component { static navigationOptions = { title: 'Home', headerStyle: { backgroundColor: '#f4511e', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, };

https://snack.expo.io/@professorxii/aGVhZG

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

A D D E D B U T T O N

R I G H T

N AV 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

S C R E E N 1

S C R E E N 3

C O M P O N E N T W I L L U N M O U N T

1

2

1

2 C O M P O N E N T D I D M O U N T H O W E V E R T H E B E H AV I O R I S M O R E C O M P L I C AT E D

S C R E E N A

S C R E E N B

componentDidMount A

Remains Mounted

componentDidMount B

S TA C K

B

AA Still on stack so Unmount is not called

componentWillUnMount B

• 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

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

this.props.navigation.getParam(paramName, defaultValue)

PA S S PA R A M E T E R T O S C R E E N

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

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> ); } }

/* 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');

R E A D I N G T H E P R O P E R T I E S I N T H E S U B V I E W

TA B N AV 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 AV I G AT I O N / B A S I C - TA B S - V 3

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 },{ initalRouteName: 'Home' } )

const AppContainer = createAppContainer(rootStack)

export default class App extends React.Component { render() { return ( <AppContainer/> ); } }

U P D AT E T O TA B N AV I G AT O R

U P D AT E I M P O R T

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', }, } ));

L E T S E X P L O R E G E T TA B B A R I C O N

const getTabBarIcon = (navigation, focused, tintColor) => { const { routeName } = navigation.state; let IconComponent = Ionicons; let iconName; if (routeName === 'Home') { iconName = `ios-information-circle${focused ? '' : '-outline'}`; // We want to add badges to home tab icon 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} />;};

import { Ionicons } from '@expo/vector-icons'; // 6.2.2

$ S Y N TA X I S N E W I T J U S T D O E S

C O N C AT E N AT I O N

https://ionicons.com

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 VA R I A B L E N U M B E R O F VA 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 AV I G AT I O N

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 },{ initalRouteName: 'Home' } )

const AppContainer = createAppContainer(rootStack)

export default class App extends React.Component { render() { return ( <AppContainer/> ); } }

U P D AT E T O D R AW N AV I G AT O R

U P D AT E T O D R AW N AV I G AT O R

N AV I G AT I O N D R A W

H E L P E R F U N C T I O N S N AV 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){ super(props) }

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> ) }

}

A D D E D M E N U I C O N C A L L T O T O G G L E D R AW

<Header navigation={this.props.navigation}/>

N E E D T O PA S S N AV 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

O T H E R N AV 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

M O D A L V I E W N AV 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 AV I G AT I O N

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