I have a navigator setup as this: (using react-navigation 5.x)
<BottomTabNavigator>
<DashboardNavigator>
<MainScreen />
</DashboardNavigator>
<ItemNavigator>
<ItemListScreen />
<ItemDetailScreen />
</ItemNavigator>
</BottomTabNavigator>
I want to go from MainScreen to ItemDetailScreen, but I want the header back button lead to ItemListScreen. In other words, I want MainScreen to be replaced by a stack with [ItemListScreen, ItemDetailScreen].
I tried using
navigation.navigate(
'ItemNavigator',
{
screen: 'ItemListScreen',
params: {
screen: 'ItemDetailScreen',
params: {id: itemId}
}
}
)
but that only gets me to ItemListScreen without ItemDetailScreen. How do I do this? Restart also didn't help
You want to use CommonActions
Here is the code for posterity:
import { CommonActions } from '#react-navigation/native';
navigation.dispatch(
CommonActions.reset({
index: 1,
routes: [
{ name: 'Home' },
{
name: 'Profile',
params: { user: 'jane' },
},
],
})
);
In your case, simply replace Home with ItemListScreen and Profile with ItemDetailScreen.
I Can Provide You With a More Efficient Way which is called react-native-navigation
if you want to Navigate Between Two Screens Then Here Is The Code
class App extends Component {
constructor(props) {
super(props);
//Setting Up The States
var data;
this.state = {
page: 'home',
data: {},
};
}
//render method
render() {
//return method
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Screen1" component={Screen}/>
<Stack.Screen name="Screen2" component={Screen2}/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
This Is The Screen Component
const Screen = ({ navigator, router }) => (
<Text>This Is Screen 1</Text>
<Button title="Go To Screen 2" onPress={() => {
navigator.push('Screen2')
}}/>
)
This Is The Screen 2 Component
const Screen2 = ({ navigator, router }) => (
<Text>This Is Screen 2</Text>
<Button title="Go To Screen 1" onPress={() => {
navigator.pop()
}}/>
)
and this is the link To React Native Navigation
Related
I created 2 pages namely Home and Profile and added these two pages to createDrawerNavigation. And then added this drawer navigation to a stack navigator. Now when I try to display the title on the header of the current page. I'm unable to do it.
Here is my code.
Tried DefaultNavigationOptions and got the props value of navigator but doesn't work that way.
const MenuStack = createDrawerNavigator(
{
HomePage: {
screen: Home
},
ProfilePage: {
screen: Profile
}
},
{
drawerWidth: Math.round(Dimensions.get("window").width) * 0.75,
contentOptions: {
activeTintColor: theme.colors.accent
}
}
);
const AppStack = createStackNavigator(
{
MenuStack: {
screen: MenuStack
}
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.toggleDrawer()}
name="bars"
size={30}
/>
),
headerRight: (
<Icon
style={{ paddingRight: 10 }}
onPress={() => navigation.toggleDrawer()}
name="search"
size={30}
/>
),
headerTitle: navigation.state.routeName,
headerStyle: {
backgroundColor: theme.colors.accent
}
};
}
}
);
export const createRootNavigator = (signedIn = false) => {
return createAppContainer(
createSwitchNavigator(
{
SignedIn: {
screen: AppStack
},
SignedOut: {
screen: WelcomeStack
},
SignInAndOut: {
screen: AuthStack
}
},
{
initialRouteName: signedIn ? "SignedIn" : "SignedOut"
}
)
);
};
I added a headerTitle property in the createStackNavigator but I tell the "menustack" as the title for every page.
Expected the title of the page on the header.
You have 2 options:
1. Render your own header component in each screen
You can render a header inside your screens, either a custom one or one from a component library such as react native paper.
function Home() {
return (
<React.Fragment>
<MyCustomHeader title="Home" />
{{ /* screen content */ }}
</React.Fragment>
);
}
2. Create a stack navigator for each screen that needs to have header
const MenuStack = createDrawerNavigator({
HomePage: {
screen: createStackNavigator({ Home })
},
ProfilePage: {
screen: createStackNavigator({ Profile })
}
});
Keep in mind that while this requires less code, it's also less performant.
Trying to create drawer using React-Navigation.
Using React Native 0.59, Installed React-Navigation 3.x, has done linking react-native link react-native-gesture-handler.
Create routes using React-Navigation, called Route.js:
const Drawer = createDrawerNavigator(
{
Settings: {
screen: HomeScene,
navigationOptions: {
title: 'Home',
drawerIcon: () => (
<Icon name="home" style={{ color: colors.white, fontSize: 24 }} type="Ionicons" />
)
}
}
},
{
contentComponent: props => <GlobalSideMenu {...props} />
}
);
const AppNavigator = createStackNavigator(
{
Home: {
screen: HomeScene,
navigationOptions: {
header: null
}
},
Drawer: {
screen: Drawer,
navigationOptions: {
header: null
}
}
},
{
initialRouteName: 'Home'
}
);
export default createAppContainer(AppNavigator);
Then in the header, drawer icon:
<Button icon transparent onPress={() => this.props.navigation.toggleDrawer()}>
<Icon name={icon('menu')} type="Ionicons" style={styles.menuColor} />
</Button>
It gives me error : toggleDrawer() is undefined.
Then I change it to :
this.props.navigation.dispatch(DrawerActions.toggleDrawer());
Now, there is no error, but the drawer is not opening.
This is usually the case if you are attempting to open the drawer from outside the drawer navigator's set of screens.
this.props.navigation.toggleDrawer is only defined if you are in Settings, which I guess is not the case.
You can either rearrange the navigation so that the drawer is present on the screen you are calling toggleDrawer from, or you can navigate to Settings first.
<Button
icon
transparent
onPress={() => {
this.props.navigation.navigate('Settings');
this.props.navigation.dispatch(DrawerActions.openDrawer());
}}
>
<Icon name={icon('menu')} type="Ionicons" style={styles.menuColor} />
</Button>
Here is an example to clarify.
On first screen I have a component having some listing of products say ProductListing.js. And on drawer navigator I have some check boxes. I want to set state of ProductListing.js when I am clicking on any check box of navigator.
App.js
import React, {Component} from 'react';
import Router from './src/config/routes';
export default class App extends React.Component {
render () {
return (
<Router/>
);
}
}
Router.js
export default DrawerNavigator({
Dashboard: {screen: Dashboard},
CreateLogin: {screen: CreateLogin},
Test: {screen: Test}
}, {
contentComponent: SideMenu,
drawerWidth: 300,
drawerPosition: 'right'
});
SideMenu.js
render () {
const { data, searchTerm, searchAttribute, ignoreCase, checked } = this.state;
return (
<View style={styles.container}>
<ScrollView>
<View>
<TextInput
style={styles.search} placeholder={"Search"}
onChangeText={searchTerm => this.setState({ searchTerm })} />
<SearchableFlatList
data={data} searchTerm={searchTerm}
searchAttribute={searchAttribute} ignoreCase={ignoreCase}
renderItem={({ item, index }) => <CheckBox
title={item.name +' ('+ item.count+')'}
onPress={() => this.handleChange(item.id)}
checked={checked[item.id]} />
}
keyExtractor={({id}, index) => index.toString()} />
</View>
</ScrollView>
<View style={styles.footerContainer}>
<Text>Apply filter by choosing filter values</Text>
</View>
</View>
);
}
}
ProductListing.js
constructor(props){
super(props);
this.state ={ isLoading: true,isloadmore: false, page :1,dataSource: [],countryFilter:0, gradesFilter:'',country:'',totalRecord:0};
}
render(){
const { navigation } = this.props;
return(
<View style={{flexDirection:'column',paddingRight:8}}>
<Button
title='Filter'
buttonStyle={{backgroundColor:'#000000',borderRadius:2}}
onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
/>
</View>
);
}
Now on click of handleChange in SideMenu.js I want to update state of gradesFilter in ProductListing.js where I am updating my product listing.
You can easily achieve this with a portal! Take a look here.
You can pass the parameters from drawer to the Product screen via navigation params.
For this, you need to stackNavigator inside your DrawerNavigator like:
Router:
const MyStack = StackNavigator({
Dashboard: {screen: Dashboard},
CreateLogin: {screen: CreateLogin},
Test: {screen: Test}
});
const MyDrawer = DrawerNavigator({
Main: { screen: MyStack }
},
{
contentComponent: SideMenu,
drawerWidth: 300,
drawerPosition: 'right'
});
export const Router = StackNavigator({
Login: {screen: Login},
Drawer: {
screen: MyDrawer,
navigationOptions: { header: null } } //prevent double header
});
Now you can navigate and pass parameter from login or Dashboard or anyother screen via Drawer like
_login() {
this.props.navigation.navigate('Drawer', { parameter: userName });
}
And to use this parameter you need to access:
const { parameter } = this.props.navigation.state.params;
which you can further use to set state like
this.setState({
productSelection: parameter)};
Another approach can be via, listener/ Callback handler.
I have made a custom component for header title(stack navigator)which shows user name along with some image.
On this page I have to edit the username and on success Update it in header as well
So my question is How to change/update title dynamically?
This can be done using the navigation props.
You can use this.props.navigation.state.params in a component to set a new property. Call:
navigation.setParams({ param: value })
See the documentation on headers for more detail.
For React Navigation version 1.x, 2.x, 3.x and 4.x, you can simply change the header by using the method shown in the code below, or the one in the original documentation: React Navigation - using params in the title
static navigationOptions = ({ navigation }) => {
const edit = navigation.getParam('edit', false);
if(edit){
return {
headerTitle: 'Edit Page',
};
}else{
return {
headerTitle: 'Normal Page',
};
}
};
For version 5.x and above, you may refer to the code below. Here are the links for the official documentation and example in expo.
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Profile"
onPress={() =>
navigation.navigate('Profile', { name: 'Custom profile header' })
}
/>
</View>
);
}
function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Profile screen</Text>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'My home' }}
/>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={({ route }) => ({ title: route.params.name })}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
In React 5.0 or above you could do the following if you want to use a Class Component:
componentDidMount() {
this.props.navigation.setOptions({
title: `Your Updated Title`,
})
}
With React Navigation 5 and React Navigation 6 you can do this like this,
set Params in your component
props.navigation.navigate("ProductDetailScreen", {
productId: itemData.item.id,
productTitle: itemData.item.title,
});
And display it
<Stack.Screen
name="ProductDetailScreen"
component={ProductDetailScreen}
options={({ route }) => ({ title: route.params.productTitle })} // what
need to add
/>
or you can do this in your component with useEffect hooks
useEffect(() => {
props.navigation.setOptions({
title: productTitle,
});
}, [productTitle, props.navigation]);
navigation.setOptions({ title: 'Updated!' })
Reference.
the code that shows in the part below is for the version of react-navigation 2.x
you can try the following:
in my case I have the configuration of navigation in a file called, app-navigator.js
const ChatStackNavigator = createStackNavigator(
{
People: ListPeopleScreen, // People Screen,
Screen2: Screen2
},
{
initialRouteName: 'People'
navigationOptions: ({navigation}) => ({
header: <AppBar title={navigation.getParam('appBar', {title: ''}).title}/>
}),
cardStyle: {
backgroundColor: 'white'
}
}
);
The screen file would be as follows:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {List, ListItem} from 'react-native-elements';
class ListPeopleScreen extends Component {
list = [
{
name: 'Amy Farha',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President'
},
{
name: 'Chris Jackson',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman'
}
];
componentDidMount() {
this.props.navigation.setParams({
appBar: {
title: 'Clientes'
}
});
}
render() {
return <List
containerStyle={{marginBottom: 30}}
>
{
this.list.map((item) => (
<ListItem
roundAvatar
avatar={{uri: item.avatar_url}}
key={item.name}
title={item.name}
/>
))
}
</List>
};
}
export default connect(null)(ListPeopleScreen);
NOTE: in my case I am using redux, and the library of components react-native-elements
In version 3.x and 4.x this can be done using static navigationOptions function,
For class compenents,
class MyComponent extends Component {
static navigationOptions = ({navigation}) => {
return {
title: navigation.getParam('title', 'Fallback title');
};
}
updateHeader = () => {
// dynamically update header
navigation.setParams({title: 'MyComponent'});
}
render() {
// call updateHeader on click of any component
}
}
For functional components,
const MyComponent = (props) => {
const updateHeader = () => {
// dynamically update header
navigation.setParams({title: 'MyComponent'});
}
// call updateHeader on click of any component
}
MyComponent.navigationOptions = ({navigation}) => ({
title: navigation.getParam('title', 'Fallback title'),
})
for react navigation Version: 5.x
const ProductDetailScreen = props => {
const { productId } = props.route.params;
const { productTitle } = props.route.params;
props.navigation.setOptions({ title: productTitle });
return (
<View>
<Text>{productId}</Text>
</View>
);
};
for react navigation Version: 5.x
For version 4, this is work for me.
const HistoryScreen: NavigationStackScreenComponent<any, any> = (props) => {
const { navigation } = props;
useEffect(() => {
let device = props.navigation.getParam("device");
if(device) {
navigation.setParams({title: `History - ${device.name}`})
}
}, []);
... render view
HistoryScreen.navigationOptions = ({
navigationOptions,
navigation,
}) => ({
headerTitle: navigation.getParam("title") ? navigation.getParam("title") : "History"
});
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="OrdersScreen"
component={OrdersScreen}
options={{ title: 'My Orders' }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
For React-Navigation v3, I used the following command to change the title of a stack:
Class component:
this.props.navigation.setParams({ title: res.title });
Function component:
props.navigation.setParams({ title: res.title });
If you use createStackNavigator you can do like this:
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,
// When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.
// Optional: When deep linking or using react-navigation in a web app, this path is used:
path: 'people/:name',
// The action and route params are extracted from the path.
// Optional: Override the `navigationOptions` for the screen
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.name}'s Profile'`,
}),
},
...MyOtherRoutes,
});
from the doc
call it like this:
navigation.navigate('Profile', {_id: item._id, name: item.screenName})}
I'm very new to React-Native so I definitely may be missing something. But all I want to do is add a hamburger type button to a settings page in the main Navigation bar. I have set up a link in the main part of that works the way I want hamburger button to work.
Screenshot
import React from 'react';
import { AppRegistry, Text, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
headerLeft: <Button onPress={ WHAT GOES HERE?? } title= "=" />
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
onPress={() => navigate('Settings')}
title="Link to Settings" />
);
}
}
class Settings extends React.Component {
static navigationOptions = {
title: 'Settings',
headerLeft: <Button title= "=" />
};
render() {
return <Text>Hello, Settings!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Settings: { screen: Settings}
});
AppRegistry.registerComponent('NavPractice', () => SimpleApp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Having this, you're very close to the solution.
static navigationOptions = {
title: 'Welcome',
headerLeft: <Button onPress={ WHAT GOES HERE?? } title= "=" />
};
A little-known fact is that navigationOptions accepts a function that returns navigation options. That function accepts some props, navigation one of them. Know this, adjust your code a little.
static navigationOptions = function(props) {
return {
title: 'Welcome',
headerLeft: <Button onPress={() => props.navigation.navigate('DrawerOpen')} title= "=" />
}
};
check this link with same issue https://github.com/react-community/react-navigation/issues/1539
check navigationOptions
navigationOptions: ({ navigation }) => ({
title: 'Schedules', // Title to appear in status bar
headerLeft: <Icon name="menu" size={35}
onPress={ () => navigation.navigate('DrawerOpen') } />
from
const SchedulesStack = StackNavigator({
Schedules: {
screen: SchedulesScreen,
navigationOptions: ({ navigation }) => ({
title: 'Schedules', // Title to appear in status bar
headerLeft: <Icon name="menu" size={35} onPress={ () => navigation.navigate('DrawerOpen') } />
})
}
});
const Homestack = StackNavigator({
Home: {
Screen: Home
navigationOptions: ({ navigation }) => ({
title: 'Home', // Title to appear in status bar
headerLeft: <Icon name="menu" size={35} onPress={ () => navigation.navigate('DrawerOpen') } />
})
}
});
const Root = DrawerNavigator({
Home: {
screen: HomeStack,
navigationOptions: {
title: 'Home' // Text shown in left menu
}
},
Schedules: {
screen: SchedulesStack,
navigationOptions: {
title: 'Schedules', // Text shown in left menu
}
}
}
})
In the above code it seems you are adding options to the sidebar and navigating to the sidebar menus.
//sidebar menu no.1
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
headerLeft: <Button onPress={//action taken when option in the menu bar is clicked} title= "//the title of the screen where you will navigate and the sidebar menu lable" />
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
onPress={() => navigate('Settings')}
title="Link to Settings" />
);
}
}
In this way you can create as many drawer options as you can.. now how to combine drawer options:
//react navigation provides you with DrawerNavigator API
const MyApp = DrawerNavigator({
Home: {
screenA: HomeScreen ,
},
Settings: {
screen: MySettingScreens,
},
});
The drawer also comes with a prop that is screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */}, like this :
<MyApp
screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */}
/>
Following are the props that react navigator provide to open/close drawer.
this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer
You can also set the drawer style according to you, like this:
drawerWidth - Width of the drawer
drawerPosition - Options are left or right. Default is left position.
contentComponent - By default there is no scrollview available in the drawer. In order to add scrollview in the drawer you need to add contentComponent in the configuration.
contentOptions - As the name suggest these are used to give color to the active and inactive drawer items (label).
Cheers :)