0% found this document useful (0 votes)
14 views39 pages

Stacknavigation

The document discusses React Navigation, a library for navigating between screens in a React Native app. It provides examples of setting up a stack navigator to navigate between screens, passing parameters between screens, and adding a tab navigator. Key aspects covered include creating route configurations, navigating between screens, and styling navigation headers.

Uploaded by

andriamamolisoa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
14 views39 pages

Stacknavigation

The document discusses React Navigation, a library for navigating between screens in a React Native app. It provides examples of setting up a stack navigator to navigate between screens, passing parameters between screens, and adding a tab navigator. Key aspects covered include creating route configurations, navigating between screens, and styling navigation headers.

Uploaded by

andriamamolisoa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

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

You might also like