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?
Related
I resolved this specific problem separating in different files the navigation components, with this way the component doesn't rerender anymore
First of all: i'm using React Native. I have a TabNavigator nested into a DrawerNavigator
i'm trying to change the color of the drawer header based on a specific screen into the Material Top Tab Navigator.
I tried to do it with screenListeners of the TabNavigator with a boolean state but when i made a setState the TabNavigator is rerendered and jump to the Home screen again.
PD: The App have a top header from the drawer and the bottom tab from the tabNavigator. I need that both of them change the color when X screen is focus.
To do this for the bottom tab i used route.name but i can't access to this property from the parent navigator.
....
screenOptions={({route}) => ({
tabBarStyle: {
backgroundColor:
route.name === '[targetScreen]' ? '#6600A1' : theme.PRIMARY_COLOR,
},
...
There are various options to provide a state in both directions, Redux, Recoil, Context Provider. If you are not already using one of them I think the Context Provider is the easiest. Basically it is a container around your outer navigator and inside you can access and change the state.
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';
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've created a ReactNative app that uses StackNavigator. Whenever the app navigates from one screen to another, it animates the navigation. Is there a way to remove the animation or customize it? StackNavigator also adds a title to each of my screen. Is there a way to remove the screen title? I tried setting the 'title' property of navigationOptions to an empty screen and the screen was rendered without a title. However, navigating from this screen to another one will cause an exception.
e.g. the "welcome" title in these sample screens
To remove the header from a stackNavigator screen, set headerMode in StackNavigatorConfig to none. So, your stackNavigator should look like so:
import HomeScreen from 'path/to/screen';
const stack = StackNavigator({
Home: {
screen: HomeScreen
}
}, {
headerMode: 'none' // <= here
});
There is an active proposal to allow the customization of animation in react navigation. You can follow this open issue
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?