I'm having some problem with React Navigation.
I have a tab navigator with different tabs, one of them being a StackNavigator.
Some times I wan't to navigate from Tab1 to some screen (let say A) in the StackNavigator
I wan't some action to go back to Tab1 from the A screen in the StackNavigator.
I was able to find this action dispatching a. navigate action.
But I'm unable to have a "back" transition from A to Tab1
Many thanks for your help.
Regards,
David
Add the following in your "Screen A"
static navigationOptions = ({navigation}) => ({
headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)}/>,
backBehavior: 'initialRoute'
});
Don't forget to import HeaderBackButton:
import {HeaderBackButton} from 'react-navigation';
Related
App using react-navigation 6
App have TabNavigator and I need to have Drawer that rendered on top of TabNavigator that render Items, that could be selected, and based on what Item was selected I need to change screen in the same Tab in TabNavigator.
The DrawerNavigator solution doesn't fit my needs. Because when user select another Tab from TabNavigator I should change Drawer content for another Tab and lock DrawerLayout on some Tabs
I tried to do the same with DrawerNavigator with CustomLayout but I can't get current routeName in DrawerNavigator to change content based on Tab, I could use TabPress listener but then how I could update DrawerNavigator route from TabNavigator?
I am using DrawerLayout to set up Drawer for my react-native app. And I just wrap TabNavigator with DrawerLayout like that(pseudo code):
const TabNavigator = ({ route, navigation }) => {
return (
<DrawerLayout route={route} navigation={navigation}>
<Tab.Navigator>
<Tab.Screen>
...rest of tabs
</Tab.Navigator>
</DrawerLayout>
)
}
And I am navigation to another screen in DrawerLayout like this when user press on Item:
const onPressItem = () => {
// if Item is not selected then navigate to new screen in the same tab
if(TabSelectedItem !== 'New_Screen_In_The_Same_Tab') {
navigation.replace('New_Screen_In_The_Same_Tab')
navigation.setParams({
TabSelectedItem: 'New_Screen_In_The_Same_Tab',
})
}
// if tab was already selected close the drawer
closeDrawer()
}
So basically everything works except one thing, I noticed that if I just close DrawerLayout everythings is fine, but when I am navigating to new screen I feel like DrawerLayout is lagging, I suppose it could be because I do navigation and all TabNavigator do re-render
Question is:
Could I fix it, or better to use any another solutions for this specific case?
I'm using the tabs template on expo react native.
I have a navigation in the AppNavigator.js
import React from 'react';
import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import GoalScreen from '../screens/GoalScreen';
const GoalStack = createStackNavigator({
Goal: GoalScreen
})
export default createAppContainer(createSwitchNavigator({
// You could add another route here for authentication.
// Read more at https://reactnavigation.org/docs/en/auth-flow.html
Main: MainTabNavigator,
Goal: GoalStack
}));
When i tap on the Goal I get to that page fine. but inside the goal screen i want to go back when i press the back button.
<Left>
<Button hasText transparent onPress={() => {
this.props.navigation.goBack(null);
}} >
<Text>Cancel</Text>
</Button>
</Left>
But for some reason is not working.
In switch navigator you have to switch navigation directly,
eg:
this.props.navigation.navigate("Main");
And if you push from one screen to another screen(In stack navigation) you can use the 'goBack' function.
It's working correctly There is no previous stack to go back.
The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away
https://reactnavigation.org/docs/en/switch-navigator.html
You can perform goback action inside GoalStack if you have more than one screen. But both the GoalStack and MainTabNavigator is specified in switch navigator. Since switch navigator shows one screen at a time, you can't perform goback here.
if you want to go for MainTabNavigator from GoalStack, you need to use like below
this.props.navigation.navigate("Main")
Try this:
this.props.navigation.goBack();
I am working on a react native Project, where I am using both Stack navigator and Tab navigator.
The main flow of the application should be in stack navigation.I have added a button on one of the screens which is in tab navigation but the navigation is not happening!
How can I get that kindly help me out
Sample code :
const Nav=createStackNavigator({
Splash: Splash,
Login: Login,
Tab:tab
})
const Tab=createBottomNavigator({
Home:Home,
Profile:Profile // i added button in this screen want to navigate to Login
})
I am able to solve the navigation issue by creating another stack for the screens which I want in tab navigation just as below and able to achieve the navigation.
//New Stack
const Stack=createStackNavigator({
Profile:Profile,
Login:Login
})
//Old Stacks
const Tab=createBottomTabNavigator({
Home:Home,
Profile:Profile
})
const Nav=createStackNavigator({
Splash:Splash,
Login:Login,
Tab:Tab
})
I am facing a problem when using react-navigation. Is it possible to add a custom button on the tab navigator like the following pictures? Do you have any ideas on this? Thanks!!
After click the add button, then a modal pops and the tab navigator hides like:
You can put whatever you want in the bar by supplying your own implementation of the bar itself.
To use it, you'll have to set the tabBarComponent property on the TabNavigator configuration:
TabNavigator({
"Tab1": {screen: Tab1},
"Tab2": {screen: Tab2}
},
{
tabBarComponent: MyTabBar
})
I have question. How should I provide parameters to main view from drawer. Is it possible? So I'm using drawer from native-base, and I have very unusual need to send two parameters choosen inside drawer (picker lists) to view in which this drawer is set?
So navigation over drawer is created by
onPress={() => this.go("DrawerClose")}
onPress={() => this.go("DrawerOpen")}
I checked inside DrawerNavigator this comments doesn't exist.
const MainNavigator = DrawerNavigator({
Home: { screen: Home }
});
So this is used only to animation or sth like that.
I've tried to set parameters by sending them in this way:
onPress={() => this.props.navigation.navigate("DrawerClose", {val1: this.state.selected1, val2: this.state.selected2})}
But I think they are not passed forward correctly.
Ano thoughts?