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
Related
I am working on a react native drawer navigation.
When I log in to the app, drawer opens, but when I logout and login again from different user and when I click my button I get the error:
ERROR The action 'Navigation/TOGGLE_DRAWER' was not handled by any navigator.
I just want to open this drawer on all the pages.
function DrawerRoot () {
return (
<Drawer.Navigator
initialRouteName='PublicHome'
drawerContent={(props) => <DrawerContent {...props} />}
drawerStyle={{ width: width - 100 }}
>
<Drawer.Screen name='PublicHome' component={PublicHome} />
</Drawer.Navigator>
)
}
<NavigationContainer ref={navigationRef}>
<Stack.Navigator initialRouteName='Drawer' headerMode='none'>
<Stack.Screen name='Drawer' component={DrawerRoot} />
<Stack.Screen name='PublicHome' component={PublicHome} options={options} />
<Stack.Screen name='PublicJobs' component={PublicJobs} options={options} />
</Stack.Navigator>
</NavigationContainer>
I'm trying to apply deep linking in my react native app. I followed the documentation and when trying to do the first test I had some problems, I believe it's because of using stack navigator and drawer menu.
Stack:
const SignedInStack = () => (
<Stack.Navigator>
<Stack.Screen name='Confluence' component={Confluence} />
<Stack.Screen name='QRCode' component={Main} />
<Stack.Screen name='Notifications' component={Notifications} />
</Stack.Navigator>
)
DrawerMenu:
const DrawerMenu = () => (
<Drawer.Navigator
screenOptions={{ headerShown: false }}
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen
name="SignedInStack"
component={SignedInStack}
/>
<Drawer.Navigator/>
);
App.js:
const App = () => (
<NavigationContainer linking={{
prefixes: ['example://'],
config: {
screens: {
Notifications: 'notifications',
},
},
}}>
<DrawerMenu />
</NavigationContainer>
);
My first useEffect on initial screen of my stack:
useEffect(() => {
Linking.openURL('example://app/notifications');
}, []);
Right after trying to redirect to the notifications screen I get the following error message:
"Error: Could not open URL 'example://app/notifications': No Activity found to handle Intent { act=android.intent.action.VIEW dat=example://app/notifications flg=0x10000000 }"
Instead of using Linking.openURL I used linkTo, as in the example below:
import { useLinkTo } from '#react-navigation/native';
...
const linkTo = useLinkTo();
useEffect(() => {
linkTo('/notifications');
}, []);
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.
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>
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!