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!
Related
I am building app using react native and I faced an error.
I added newly screen by copying certain page on the same project and reload app but occur an error
I try to solve this issue by restarting metro and restart nox(emulator) but this issue is not fixed.
import { AuthContext } from '../AuthProvider';
import ProfileScreen from '../containers/Profile';
import LifeSpanScreen from '../containers/LifeSpan';
import TopWishInScreen from '../containers/TopWishIn';
import aaa from '../containers/TopWishOut';
const Stack = createNativeStackNavigator();
const MainNavigator = () => {
const { user, userProfile } = useContext(AuthContext);
const [isLoading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 3000);
}, []);
if (isLoading) {
return <SplashScreen/>
}
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
{
userProfile ? (
<>
<Stack.Screen name="Home" component={HomeNavigator} />
<Stack.Screen name="Chat" component={ChatScreen}/>
</>
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="LifeSpan" component={LifeSpanScreen} />
<Stack.Screen name="TopWishIn" component={TopWishInScreen} />
<Stack.Screen name="TopWishOut" component={aaa} />
</>
)
}
</Stack.Navigator>
</NavigationContainer>
);
};
export default MainNavigator;
And TopWishOut.js is like this:
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { AuthContext } from '../../AuthProvider';
import OutlineButton from '../../components/OutlineButton';
import AuthInput from '../../components/AuthInput';
import { styles } from './styles';
const TopWishOutScreen = ({ navigation }) => {
const { loading, login } = useContext(AuthContext);
const [userName, setUserName] = useState("");
const [eventHint, setEventHint] = useState('To put in perspective 24 years ago was 1998. What appened in that year ? ');
const [shareMessage, setShareMessage] = useState('Share what you are planning to do over the next 24 years')
return (
<View style={styles.container}>
<KeyboardAwareScrollView style={{ flex: 1 }} contentContainerStyle={{ flex: 1 }}>
<View style={styles.containerInner}>
<View style={styles.message}>
<Text style={styles.notetext}>{"With just 24 years remaining, what are you going to do with that time?"}</Text>
<Text style={styles.plannote}>{"Plan out your time left by focusing on what is most important."}</Text>
</View>
<View style={styles.topwishlist}>
<View>
<AuthInput
placeholder='Get vp title'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
<View style={styles.divider}/>
<View>
<AuthInput
placeholder='Bora Bora'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
<View style={styles.divider}/>
<View>
<AuthInput
placeholder='Go to 170lbs'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
<View style={styles.divider}/>
<View>
<AuthInput
placeholder='Help poor with electrtcity'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
<View style={styles.divider}/>
<View>
<AuthInput
placeholder='Take Grandkids to Desney world'
value={userName}
onChangeText={(v) => setUserName(v)}
borderType={"roundTop"}
/>
</View>
</View>
<View style={styles.divider}/>
<View style={styles.loginWrapper}>
<OutlineButton
title="Next"
loading={loading}
onPress={() => {
navigation.navigate('');
}}
/>
</View>
</View>
</KeyboardAwareScrollView>
</View>
);
};
export default TopWishOutScreen;
Error message is like this
I am using nox player as emulator.
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.
I am using andSubject function to set the subject in the parent component but it's not working can someone help me how can I call addSubject when I press the RoundedButton?
...
const [tempItem, setTempItem] = useState(null);
.....
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onSubmitEditing={({ nativeEvent }) => {
setTempItem(nativeEvent.text);
// addSubject(nativeEvent.text);
}}
/>
<RoundedButton
title="+"
size={50}
onPress={() => addSubject(tempItem)}
/>
</View>
...
I guess you are looking for something like this :
const [tempItem, setTempItem] = React.useState("");
const [addSubject , setAddSubject] = React.useState("");
...
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<Text>this text bellow will show after pressing on the button :</Text>
<Text>{addSubject}</Text>
<TextInput
style={styles.textInput}
onChangeText={setTempItem}
/>
<Button
title="+"
size={50}
onPress={() => setAddSubject(tempItem)}
/>
</View>
</View>
);
}
...
demo
You have to pass the function to children by props.
parent.js
function setAddSubject(item){
console.log(item)
}
<YourForm call={(item)=>setAddSubject(item) } />
YourForm.js
export default =(props)=>{
const [tempItem, setTempItem] = useState(null);
return (
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onSubmitEditing={({ nativeEvent }) => {
setTempItem(nativeEvent.text);
// addSubject(nativeEvent.text);
}}
/>
<RoundedButton
title="+"
size={50}
onPress={() => props.call(tempItem)}
/>
</View>
);
}
I have created header component and i want to open drawer from header component from icon click, currently swipe is opening drawer. please help if anyone know what is the issue
this is my app js code where i created drawer navigator
<NavigationContainer>
<Drawers.Navigator drawerContent={props => <Drawer {...props} />} >
<Drawers.Screen
name="Home"
component={Home}
initialParams={({navigation}) => {
return{
headerTitle:() => <HomeHeader navigation={navigation}/>,
}
}}
/>
<Drawers.Screen
name="Orders"
component={Orders}
/>
<Drawers.Screen
name="Account"
component={Account}
/>
</Drawers.Navigator>
</NavigationContainer>
and this is my header component where i was trying to navigation.openDrawer
export default function HomeHeader({navigation}) {
const openMenu = () => {
navigation.openDrawer();
}
return (
<View style={GlobalStyle.hheader} >
<View style={GlobalStyle.mainMenu} >
<Icon type="material" name="menu" size={26} color="black" onPress={openMenu} />
</View>
<View style={GlobalStyle.near} >
<Text style={GlobalStyle.nTitle}>Your Location</Text>
<Text style={GlobalStyle.nLocate}>Mehran Town <Icon iconStyle={{ marginBottom:-1, }} name='chevron-down' size= {16} type='font-awesome' color='#000'
/></Text>
</View>
</View>
)
}
and finally draweritem code
<DrawerItem
label="Profile"
onPress={() => {props.navigation.navigate('Account')}}
labelStyle={{color: '#000', fontSize:15}}
icon={() => (
<Icon
name='account-circle'
type='material'
color='#4285F4'
size={18}
/>
)}
/>
<DrawerItem
label="Orders"
onPress={() => {props.navigation.navigate('Orders')}}
labelStyle={{color: '#000', fontSize:15}}
navigation={props.navigation}
icon={() => (
<Icon
name='receipt'
type='material-icons'
color='#4285F4'
size={18}
/>
)}
/>
</View>
I don't think headerTitle is place for you return custom header menu.
My suggestion you can render customer header in each screen content and using navigation.openDrawer(); or try create wrapper view for Drawer and render header first. Or create BaseScreen with your custom header and inheritance for each your screen. But headerTitle I don't think it work.
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>