Develop Reference

Navigation and Drawer Navigation React-Native

So I had a navigation system in place already, and wanted to add a Drawer menu for specific navigations starting on the main shopping page once the user had logged in. The issue I am having is after following some directions online on how to have multiple navigations of different types the drawer buttons just simply don't do anything when clicked on. any insight or help is much appreciated.
I have the NavigationContainer on the app.js file, containing the DrawerMenu file, through which I imported the main StackNavigator file.
Main StackNavigator file
// Main Nav
import PasswordVerify from '../screens/PasswordVerify';
import HomeShopping from '../screens/HomeShopping';
import StorePage from '../screens/StorePage';
// Drawer Screens
import ProfileScreen from '../screens/DrawerScreens/ProfileScreen';
import MyListingsScreen from '../screens/DrawerScreens/MyListingsScreen';
import SellerDashBoardScreen from '../screens/DrawerScreens/SellerDashBoardScreen';
const Stack = createNativeStackNavigator();
const Navigation = () => {
return (
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
{/* Drawer Screens */}
<Stack.Screen name="ProfileIndex" component={ProfileScreen} />
<Stack.Screen name="MyListingsIndex" component={MyListingsScreen} />
<Stack.Screen name="SellerDashboardIndex" component={SellerDashBoardScreen} />
</Stack.Navigator>
DrawerMenu file
import { createDrawerNavigator } from '#react-navigation/drawer';
import Navigation from './StackNavigator';
const Drawer = createDrawerNavigator();
const DrawerMenu = () => {
return (
<Drawer.Navigator screenOptions={{headerShown: false}}>
<Drawer.Screen name="Profile" component={Navigation} />
<Drawer.Screen name="MyListings" component={Navigation} />
<Drawer.Screen name="SellerDashboard" component={Navigation} />
This is just what I interpreted from the guide I read and followed the best I could, and they had working examples, everything matches up except for the fact that when I pull out the Drawer menu, clicking the names there does nothing.
Thank you again for your time and help.
Tried implementing drawer navigation to my react-native app while I had another main navigation in place already for all non-drawer links. the result was the links on the drawer not responding at all.

I would understand your idea as follows:
You have 3 screens: PasswordVerify, HomeShopping, StorePage.
You have a Drawer with 3 screens: ProfileScreen, MyListingsScreen, SellerDashBoardScreen.
You want from PasswordVerify(or HomeShopping or StorePage) redirect to Drawer.
You want after redirect, you can see your drawer and can press(or slide) to display drawer menu.
And i have an idea for your case:
Define Drawer.
Use Drawer(defined) like a Stack.
Import Drawer in Stack.Navigator.
This is code:
const Drawer = createDrawerNavigator();
const DrawerNav = () => {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="ProfileScreen" component={ProfileScreen} />
<Drawer.Screen name="MyListingsScreen" component={MyListingsScreen} />
<Drawer.Screen name="SellerDashBoardScreen" component={SellerDashBoardScreen} />
</Drawer.Navigator>
);
};
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
<Stack.Screen name="DrawerNav" component={DrawerNav} />
</Stack.Navigator>
</NavigationContainer>
);
}

This is the best way to use Stack Navigator and Drawer Navigator together?

I've been programming in React Native for a short time, and I know little about react-navigation. After trying a lot I managed to use stack navigator with a custom drawer navigator (side menu), but this seems to be very strange because my stack is inside my menu drawer like a screen.
My stack:
const SignedInStack = () => (
<Stack.Navigator>
<Stack.Screen name='Confluence' component={Confluence} />
<Stack.Screen name='QRCode' component={Main} />
</Stack.Navigator>
)
In the DrawerMenu:
const DrawerMenu = () => (
<Drawer.Navigator
screenOptions={{ headerShown: false }}
drawerContent={(props) => <CustomDrawerContent {...props} />}
detachInactiveScreens={false}
>
<Drawer.Screen
name="SignedInStack"
component={SignedInStack}
options={{
drawerItemStyle: { height: 0 }
}}
/>
<Drawer.Screen
name="QRCode"
component={Main}
/>
<Drawer.Navigator/>
);
In the App.js:
const App = () => (
<NavigationContainer>
<DrawerMenu />
</NavigationContainer>
);
Previously I use my drawer menu inside my stack, but the app had navigation problems.

Stack navigator doesn't work in release apk

I have Drawer and Stack navigators in my app
drawer
const Drawer = createDrawerNavigator();
export default class App extends Component {
render() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Games" component={GamesScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
}
stack
import Cities from "../components/games/Cities";
const GScreen =({navigation}) =>{
return(
/*code*/
)
}
const Stack = createStackNavigator();
export default class GamesScreen extends Component {
render() {
return (
<Stack.Navigator>
<Stack.Screen name='Games' component={GScreen} options={{headerTitle:(props) => <Header props=
{this.state} {...props} />}}/>
<Stack.Screen name='Cities' component={Cities} options={{headerTitle:(props) => <Header props=
{this.state} {...props} />}}/>
</Stack.Navigator>
);
}
}
My app is working fine in debug mode, but in release only the drawer works.
When i ckick on a component just nothing happens

Left-to-right animation on Android with react-native-navigation when pushing new screen to stack

On Android with react-native-navigation, when pushing a new screen to the stack, I’d like the transition animation to be from left-to-right (or vice-versa, for RTL layout)
In iOS it‘s the default, where as on Android – it seems to be shown with cross-dissolve animation. how can I achieve the horizontal animation as in iOS?

Here is an example stack navigator for you:
import { createStackNavigator, CardStyleInterpolators } from "#react-navigation/stack";
class CompaniesIndex extends React.Component<
ICompaniesIndexProps,
ICompaniesIndexState
> {
render() {
return (
<CompanyStack.Navigator
mode="modal"
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
}}
initialRouteName="AllCompanies">
<CompanyStack.Screen
options={{
title: "Firma Listesi",
header: (props) => <Header {...props} />,
}}
name="AllCompanies"
component={CompaniesAll}
/>
<CompanyStack.Screen
options={{
title: "Yeni Firma",
header: (props) => <Header {...props} />,
}}
name="NewCompany"
component={CompanyNew}
/>
<CompanyStack.Screen
options={{
title: "Firma Detayı",
header: (props) => <Header {...props} />,
}}
name="CompanyDetails"
component={CompanyDetails}
/>
</CompanyStack.Navigator>
);
}
}
You can achieve that with adding screenOptions={{cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS}} in your stack navigator.

For react-navigation#6.0.1, use animation: "slide_from_right" in screenOptions.
<Stack.Navigator
screenOptions={{
headerShown: false,
animation: "slide_from_right",
}}

if you use native-stack (#react-navigation/native-stack or react-native-screens/native-stack), just input 'stackAnimation' option in screenOptions of your Navigator!
import { createNativeStackNavigator } from 'react-native-screens/native-stack';
const Stack = createNativeStackNavigator();
<Stack.Navigator screenOptions={{ headerShown: false, stackAnimation: 'slide_from_right' }}>
<Stack.Screen name="First" component={FirstScreen} />
<Stack.Screen name="Second" component={SecondScreen} />
</Stack.Navigator>

drawer-navigation doesn't hide screen

I am using react-navigation 5 and I have stack navigation and inside drawer navigation, I want to hide some of the drawer's navigation screens. So, I pass null in drawerLabel attribute as follow
import * as React from 'react';
import {createDrawerNavigator} from '#react-navigation/drawer';
import ShowNotes from "../screens/notes/ShowNotes";
const Drawer = createDrawerNavigator();
const DrawerNavigation = () => {
return (
<Drawer.Navigator>
<>
<Drawer.Screen
name="Home"
component={ShowNotes}
options={{
headerTitle: 'All Notes',
drawerLabel: () => null
}}
/>
</>
</Drawer.Navigator>
);
}
export default DrawerNavigation;
This DrawerNavigation is inside a StackNavigation like so
const Stack = createStackNavigator();
const Navigation = ({auth}) => {
return (
<NavigationContainer theme={CustomTheme}>
<Stack.Navigator
screenOptions={({navigation}) => ({
headerLeft: () => (
<Button
onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
title="Info"
color="#fff"
/>
),
})}
>
<Stack.Screen
name="Home"
component={DrawerNavigation}
/>
<Stack.Screen
name="AddNoteScreen"
component={AddNote}
/>
<Stack.Screen
name="UpdateNoteScreen"
component={UpdateNote}
/>
}
</Stack.Navigator>
</NavigationContainer>
);
};
const mapStateToProps = state => {
return {auth: state.auth};
};
export default connect(mapStateToProps, {})(Navigation);
What I see on my screen is the drawer doesn't contain my screen but an empty blank area which is clickable
How I can stop displaying a screen in drawer?
Cheers

I don't know if this is the best solution but this is what it works for me.
I set the screens that I don't want to display as Drawer.Screen and inside Drawer.Navigator I set the property drawerContent with the screens that I want to display in the drawer. have a look in the code
<Drawer.Navigator
drawerContent={() => {
return (
<>
<DrawerContentScrollView>
{auth.isSignedIn ?
<Layout>
<Layout>
<Layout style={{flexDirection: 'row', marginTop: 15, marginLeft: 10}}>
<Avatar.Image
source={{
uri: auth.userData.picture,
}}
size={70}
/>
<Layout style={{flexDirection: 'column', marginLeft: 15}}>
<Title>{auth.userData.name}</Title>
<Caption>{auth.userData.email}</Caption>
</Layout>
</Layout>
</Layout>
</Layout>
:
<>
</>
}
</DrawerContentScrollView>
<DrawerSection>
<DrawerItem
icon={({color, size}) => (
<Icon
name="exit-to-app"
color={color}
size={size}
/>
)}
label="Sign Out"
onPress={() => {
LoginManager.logOut();
signOut();
}}
/>
</DrawerSection>
</>
);
}}
>
<
Drawer.Screen
name="Home"
component={ShowNotes}
options={
{
headerTitle: 'All Notes',
}
}
/>
<Drawer.Screen
name="AddNoteScreen"
component={AddNote}
/>
<Drawer.Screen
name="UpdateNoteScreen"
component={UpdateNote}
/>
</Drawer.Navigator>
I hope it helps!