This is my setup, using react-navigation 4:
**//Stack Navigators**
const Stack1 = createStackNavigator(
{
Screen1: Screen1,
Screen2: Screen2
}
);
const Stack2 = createStackNavigator(
{
Screen3: Screen3,
Screen4: Screen4
}
);
const Stack3 = createStackNavigator(
{
Screen5: Screen5,
Screen6: Screen6
}
);
**//Tab Navigator**
const TabNav = createBottomTabNavigator(
{
1: {
screen: Stack1,
},
2: {
screen: Stack2,
}
}
);
**//DrawerNavigator**
const MainNavigator = createDrawerNavigator(
{
Nav: {
screen: TabNav,
},
SecondDrawerLink: {
screen: Stack3,
},
}
);
const App = createAppContainer(MainNavigator);
My Tabs (TabNav) are only showing in "Nav" Drawer but not in the "SecondDrawerLink" Drawer. Which makes sense, because I only add "TabNav" to the "Nav" Drawer. The problem is, I can't wrap my head around how I would show my "TabNav" in all of my other DrawerLinks.
Any help would be appreciated. Thank you very much in advance.
I would try inserting the pages from Stack3 into the Stack1 and Stack2. And from the SecondDrawerLink trigger a custom call, which navigates to the Screen5 for instance.
This way your stack from either Stack1 or Stack2 will accept the special Drawer's command, and you'll still be able to go back to the screen you were before triggering the SecondDrawerLink.
Related
// AppContainer.js
const AuthNavigator = createStackNavigator(...code);
const DrawerNavigator = createDrawerNavigator(
{
MyAccount: MyAccountScreen,
Home: HomeScreen,
}
);
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
const AppContainer = createAppContainer(
createSwitchNavigator(
{
AuthNavigator,
AppNavigator,
DrawerNavigator,
},
{
initialRouteName: AuthNavigator,
}
)
);
// HomeScreen.js I call:
onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())
}
It opens the modal, but always goes automatically to MyAccountScreen without touch anything. The expected behaviour it's only open the modal.
Yes, which is actually correct. But you have some flows in understanding how a DrawerNavigator should work. You cannot open the drawer if you're not on the Drawer.
I see that you have HomeScreen defined in 2 Navigators. And I have a feeling that you want to be able to navigate from Home to/from MyAccount using the DrawerNavigator, which means that both those routes have to be inside the DrawerNavigator and you want the HomeScreen to be the first screen that is visible by default.
const DrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
Which you kind of already have. The misconception that you have is that for your current routes, you don't need the AppNavigator, you could simply rename the above one as AppNavigator and your navigation configuration should look something like this:
const AppNavigator = createDrawerNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
const AppContainer = createAppContainer(
createSwitchNavigator(
{
AuthNavigator,
AppNavigator,
DrawerNavigator,
},
{
initialRouteName: AuthNavigator,
}
)
);
And that's it. Now when you navigate to AppNavigator, the first displayed route will be Home and opening the Drawer will just display the Drawer and won't automatically navigate you to MyAccountScreen.
I'm new to react native, and I've problem with navigating between one of my screen to another.
I'm using stacknavigator like this:
const RootStack = createStackNavigator(
{
Splash: { screen: SplashScreen},
Mobile:{screen:MobileAuthentication} ,
Code:{screen:CodeAuthentication} ,
Home: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
ProfileDetails: { screen: ProfileDetails },
},
{ initialRouteName: 'Splash'}
);
const AppContainer = createAppContainer(RootStack);
In my homeScreen I am using buttomtabnavigator
const bottomTabNavigator = createBottomTabNavigator(
{
A: {
screen: ProfileScreen,
navigationOptions: {
...
}
},
B: {
screen: FilterScreen,
navigationOptions: {
...
}
},
},
{
initialRouteName: 'FilterScreen',
tabBarOptions: {
activeTintColor: '#3F51B5'
}
}
);
const AppContainer = createAppContainer(bottomTabNavigator);
The problem is that when I want to navigate from ProfileScreen to ProfileDetails by onpress then it's not working
<ProfileBtn
onPress={() => {
console.log('item Clicked'),
this.props.navigation.navigate('ProfileDetails')
} }
/>
Maybe you should try to pass "navigation" into your stackNavigator creation, using the options with smthg like this (for each of your stack screen or at least those within which you want to use it) :
options={({route, navigation}) => (
{headerTitle: 'Splash',
route: {route},
navigation: {navigation}}
)}
If that's not the answer, please provide us with the error you get in your console.
My BottomTabNavigator is working as expected. The problem is that I would like to initially render a page that is outside of the navigator tabs. How could I accomplish this?
import Loading from "./components/Loading.js";
import Profile from "./components/Profile.js";
import History from "./components/History.js";
import Main from "./components/Main.js";
const TabNavigator = createBottomTabNavigator({
Profile: {screen: Profile},
Main: {screen: Locatione},
History: {screen: History},
},
{
initialRouteName: "Loading"
});
export default createAppContainer(TabNavigator);
Before, I was using createStackNavigator, which was working pretty well. Is there any way that I could combine both CreateBottomStackNavigator and createStackNavigator?
const AppNavigator = createStackNavigator(
{
Auth: Auth,
Loading: Loading,
Main:Main,
Locatione:Locatione,
Map: Map,
Contactos: Contactos
},
{
initialRouteName: "Loading"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default function App() {
return <AppContainer />;
}
Yes, you have to add that screen in an navigationStack and name it the inital page, and add the navigation stack to bottomTab navigator.
here im adding the home scren to app stack navigator and this is the inital screen i want to render.
const AppStack = createStackNavigator(
{
HomeScreen: {
screen: Home
},
AirportMeeting:{
screen:AirportMeeting
}
},
{
initialRouteName:"HomeScreen",
}
)
now im adding that appstack , i.e the stack navigator as a tab in the bottomtab navigator by writing Home:AppStack and my notifications and settingscreen are just screens, i.e class componenets
const TabNavigator = createBottomTabNavigator({
Home: AppStack,
Notification:Notifications,
Account: SettingsScreen,
})
and finally im making my tabnavigator as my appcontainer. hence it works
const navigation = createAppContainer(
TabNavigator
);
so similarly you can try for the loadingscreen by adding in the navigation stack and then adding that stack in the bottomTabNavigator nad creating a container of bottomTabNavigator.
Hope it helps. feel free for doubts
Yes, you can do that, what you basically need to is, create a stack navigator as your app container and inside that put bottom tab navigator. Like,
Something like this,
const myTabNavigator = createBottomTabNavigator(
{
Home: { screen: YOUR_HOME },
},
{
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width * 0.75
}
)
const RootStack = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
SomeName: {
screen: myTabNavigator,
navigationOptions: {
header: null,
},
},
})
You can add any screen you want to show outside bottom tab navigator.
in the tab bar I used two tabs for each tab as created separate navigator
here is my code:
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
});
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
Profile: ProfileScreen,
});
const TabNavigator = createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack,
}
);
We start on the HomeScreen and navigate to DetailsScreen. Then we use the tab bar to switch to the SettingsScreen and navigate to ProfileScreen. After this sequence of operations is done, all 4 of the screens are mounted! If I use the tab bar to switch back to the HomeStack I was displaying the Home screen but I want the HomeScreen to need to display instead of the detail screen.
Any suggestions much helpful, thanks in advance.
This is actually surprisingly tricky with react-navigation.
One way to achieve this globally is by using the tabBarOnPress callback to reset the stack every time a tab is changed:
import { StackActions, NavigationActions } from 'react-navigation';
const TabNavigator = createBottomTabNavigator({
Home: HomeStack,
Settings: SettingsStack,
}, {
defaultNavigationOptions: {
tabBarOnPress: ({ navigation, defaultHandler }) => {
defaultHandler(); // Switch tab
if (navigation.state.index > 0) { // In case the stack is not positioned at the first screen
const resetAction = StackActions.reset({ // Reset the stack
index: 0,
actions: [
NavigationActions.navigate({ routeName: navigation.state.routes[0].routeName })
],
});
navigation.dispatch(resetAction);
}
},
},
});
Whenever the user switches tab, the new stack will move to the first index in case it was not already.
I'm building an app with drawer-navigator. There should be custom side-menu screen which I made by contentComponent, but the problem is I need to make a navigation inside a drawer when the user pressed a button. I tried to pass stackNavigator to customComponent, this returns me "There is no route defined for key ...".
Please, could you help me, make a navigation inside the drawer without closing it.
const tempSN = createStackNavigator(
{
screen: DrawerScreen,
screen2: ProfileSetupScreen
},
{ initialRouteName: "screen" }
);
const DrawerStack = createDrawerNavigator(
{
MainStack: MainStack
},
{
contentComponent: tempSN, // If I pass here DrawerScreen directly, it works
navigationOptions: {
header: null
}
}
);
Can you try the following???
const DrawerStack = createDrawerNavigator(
{
MainStack: MainStack
},
{
contentComponent: drawerComponent,//Your drawer component.Not stack navigator.
navigationOptions: {
header: null
}
}
);
const drawerStack = createStackNavigator(
{
drawerNav: DrawerStack,// Here is the drawer included.
screen: DrawerScreen,
screen2: ProfileSetupScreen
},
);
Add the drawer navigation inside the stack navigation. And when you want to navigate to screen 'screen2', use like this.props.navigation.navigate("screen2")