so in react navigation v5 how to check if drawer open or not
not that i use custom drawer
drawerContent={(props) => <DrawerComponent {...props} />}
const isDrawerOpen = useIsDrawerOpen() i can not use this from
useIsDrawerOpen() is a Hook to detect if the drawer is open in a parent navigator.
For exemple in your view you can test if your drawer is open or not directly using this approach :
import { useIsDrawerOpen } from '#react-navigation/drawer';
const MainContainer = () => {
return (
<View style={(useIsDrawerOpen()) ? styles.conatinerOpenStyle : styles.containerClosedStyle}>
<Text>{console.log("Test drawer "+useIsDrawerOpen())}</Text>
</View>
);}
And it will indicate to you the state of your drawer.
Related
is there a way to add ref for each tab in the Bottom Tabs Navigator ?
like
<View ref={component => this.childComponent = component} />
I'm using react native navigation bottom tabs, and I want to create a custom "bottom sheet" popup component, but I want that component to come over the bottom tabs. Does anybody know how to position elements on top of the bottom tabs?
Yes! You have to use react-native-portalize. Just wrap the elements you want to be rendered on top in a <Portal></Portal>. This will place it above a Bottom Tab navigator.
import { Portal } from 'react-native-portalize';
const FooterButton = () => {
return(
<Portal>
<View>
<Text>I appear above the Tab Navigator!</Text>
</View>
</Portal>
);
export default FooterButton;
Don't forget to wrap the whole app in the the Host:
//In app.js
import { Host } from 'react-native-portalize';
const App = () => {
return (
<Host>
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
</Host>
)
}
export default App;
NOTE: The elements inside the Portal, do not clear when the navigator navigates to another screen. So to get around this, you have to only display the Portal, when the screen is active. Thankfully React Navigation 5+ provides a useIsFocused hook that accomplishes this perfectly.
import { Portal } from 'react-native-portalize';
import { useIsFocused } from '#react-navigation/native';
const FooterButton = () => {
const isFocused = useIsFocused();
// Only display the button when screen is focused. Otherwise, it doesn't go away when you switch screens
return isFocused ? (
<Portal>
<View style={styles.buttonContainer}>
<View style={styles.footer}>{props.children}</View>
</View>
</Portal>
) : null;
};
export default FooterButton;
If you want a modal-style popup, you can wrap react-native-modalize and wrap it with react-native-modalize
Thanks to livin52 on Reddit for the solution
i am using the React navigation version 6 and i want to header of navigation
with drawer and Stack
but when i use stack in drawer navigation then shows to two header
the below is code which i write
const StockStack = createNativeStackNavigator();
const StockScreen = ({ navigation }) => (
<StockStack.Navigator>
<StockStack.Screen name="StockList" component={StockList} />
<StockStack.Screen name="StockItemDetail" component={StockItemDetail}/>
</StockStack.Navigator>
)
and this the drawer navigation
return (
<Drawer.Navigator drawerContent={ props => <SideMenu {...props} /> }>
<Drawer.Screen name="StockScreenList" component={StockScreen} />
</Drawer.Navigator>
);
any can help you can i remove the drawer header
When I use props.navigation.navigate("example"), it works normally. But if I import the component on another page it doesn't work anymore, props returns an empty object.
Works Fine:
const Menu = props =>{
console.log(props)
return(
<View style={styles.menuStyle}>
<TouchableOpacity style={styles.topicDiv} onPress={() =>props.navigation.navigate("Ads")}>
<View>
<Image style={styles.topicStyle} source={require ("../assets/security-camera.png")}/>
<Text style={styles.textStyle}>Câmeras</Text>
<Text style={styles.subTextStyle}>Veja como está a praia ao vivo 📷</Text>
If i try import Menu, navigation does not work:
import React from "react";
import { View } from "react-native";
import Menu from "./menu";
const Supermenu = () =>{
return(
<View>
<Menu></Menu>
</View>
)
}
export default Supermenu
If you use <Menu> inside of another component like <Supermenu>, React Navigation has no way to pass its navigation property in there. It only happens automatically if a component is a direct child of a screen (or its component property).
To have navigation available in Menu regardless of its position in the hierarchy, as long as it's a child of <NavigationContainer>, the best way is to make use of the useNavigation hook:
import { useNavigation } from '#react-navigation/core';
const Menu = props =>{
const navigation = useNavigation();
return (
<View style={styles.menuStyle}>
<TouchableOpacity style={styles.topicDiv} onPress={() => navigation.navigate("Ads")}>
...
See documentation for more detail.
If you are on an older version, there was also a HOC withNavigation that you could use.
You could also do the same in Supermenu and then pass navigation down manually.
use import {userNavigation} from '#react-navigation/core' instead of props navigate or you can add navigation props to the Menu component.
I recently tried using the Drawer component of Native Base 2.0 which basically has this template:
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this._navigator} />}
onClose={() => this.closeDrawer()} >
<Content>
insert content here
</Content>
</Drawer>
)
}
I made my customer SideBar component with some ListItems in there, I made those list items clickable using the react-navigation package.
onPress={() => this.props.navigation.navigate(data)}>
The problem is that I don't get the this._navigator property that is being passed from the Side Bar and I always get this error:
NativeBase has deprecated Drawer, use react-navigation instead
They have added back Drawer in v2.8.0
https://github.com/GeekyAnts/NativeBase/releases/tag/v2.8.0