I got one screen where I need to get createMaterialTopTabNavigator and createBottomTabNavigator it is nested in createStackNavigator.
So I click on button on HomeScreen and StackNavigator navigates me to screen where is
createBottomTabNavigator primary navigation and createMaterialTopTabNavigator is different for each screen in createBottomTabNavigator
So it should be
createStackNavigator
createBottomTabNavigator
createMaterialTopTabNavigator
SomeTabBarScreen
SomeTabBarScreen
createMaterialTopTabNavigator //if I click on icon in BottomNavigator to navigate on another screen I want different TopNavigator
SomeTabBarScreen
SomeTabBarScreen
I'll just write out some pseudo code here, but you can nest stacks like so:
const FirstMatTab = createMaterialTopTabNavigator({//Routes here});
const SecondMatTab = createMaterialTopTabNavigator({//Routes here});
const TabNav = createBottomTabNavigator({
FirstTab: FirstMatTab,
SecondTab: SecondMatTab
});
const MainStack = createStackNavigator({
Tab: TabNav,
})
This means you can just call in your render function the component you want it rendered in.
Related
I'm trying to create a Drawer Navigation with React Navigation, but the gestures (swipe left/right), to open/close the Drawer, don't work.
Its running on a Asus 4 Max with Android 8.1. The project uses:
React Native#0.59.1
React#16.8.3
React Navigation#3.5.1
React Native Gesture Handler#1.1.0
I already trying to change the Lock Mode of the drawer.
If i use a Button with this.props.navigation.openDrawer() or this.props.navigation.closeDrawer() it works.
I thought that could be the Gesture Handler, but when I create a Tab Navigator the Swipe works pretty well.
My routes file:
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation';
import Login from './pages/Login';
import Main from './pages/Main';
import Plans from './pages/Plans'
const DrawerRoutes = createDrawerNavigator({
Main,
Plans
})
const StackRoutes = createStackNavigator({
Login,
App: DrawerRoutes
});
const RoutesContainer = createAppContainer(StackRoutes)
export default RoutesContainer;
I expect to be able to swipe from left to right to open, and the inverse to close the Drawer.
{
swipeEnabled: true,
}
use swipe enabled
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'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';
Please check this expo snack.
I have a switch-navigator for logged-in and not-logged-in states.
When user is logged in, switcher loads a DrawerNavigator which loads Screen1 and loads the sidebar (SideBar.js) via contentComponent
Inside Screen1 I'm calling the this.props.navigation.navigate('DrawerOpen'); via the onPress event of the menu burger button. But it's not opening the drawer. What am I doing wroing
You call in a screen which isn't contained in DrawerNavigation, so it can't navigate. To open drawer in anywhere just use
import { DrawerActions } from 'react-navigation';
...
openDrawer = () => {
this.props.navigation.dispatch(DrawerActions.openDrawer());
}
...
use this:
this.props.navigation.openDrawer();
In React Navigation 3.x, you can use this.props.navigation.openDrawer(); to open the drawer in CreateDrawerNavigator. It is the same as using this.props.navigation.dispatch(DrawerActions.openDrawer());.You can checkout the official docs here : https://reactnavigation.org/docs/en/drawer-based-navigation.html
I have a Home screen as the root of my stack navigator. I tried to add a componentWillAppear function to my Home.js react component but it doesn't fire when I return to that screen from my contact screen by pressing the back button.
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import Contact from './Contact';
class Home extends Component {
static navigationOptions = {title:'Home'};
componentWillAppear()
{
console.log('hello');
}
render()
{
return <View></View>;
}
}
let Router =
{
Home: {screen: Home},
Contact:{screen:Contact}
}
const Navigator = StackNavigator(Router);
export default Navigator;
Is there another event handler that will always fire every time my Home screen becomes visible when you've returned from a child screen of a Stacked Navigator?
As per bennygenel comment:
I don't think there is. If you need to do something on previous screen
there is 2 options you can use. First option is to use redux or
similar package and fire an action to update the previous components
props or second option is to use a custom back button that does
something like this answer and then this.props.navigation.goBack()