I want that when I click on my button "More", the last tab of my list, it opens a Modal but with my code it does not work. How to make it work ?
function MyTabs() {
const [modal, setModal] = useState(true);
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Mon compte" component={AccountScreen} />
<Tab.Screen name="Mes transferts" component={TransfertsScreen} />
<Tab.Screen name="Créer" component={CreerScreen} />
<Tab.Screen name="Suivi" component={SuiviScreen} />
<Tab.Screen name="More" component={MoreScreen} listeners={({ navigation, route }) => ({
tabPress: e => {
console.log(1)
e.preventDefault();
<Modal isVisible={modal}>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
<Button title="Fermer la modale" onPress={() => {setModal(false);}}></Button>
</View>
</Modal>
},
})} />
</Tab.Navigator>
</NavigationContainer>
);
}
Try
<Button title="Fermer la modale" onPress={() => setModal(false)}></Button>
Related
This is the App.js when I change the home name in the navigator it works well.
<Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}><Drawer.Screen
options={{
headerShown: false
}}
name='Home' component={MainTabScreen} />
{/* <Drawer.Screen name="Products" component={Products} /> */}
</Drawer.Navigator>
</NavigationContainer>`
Here is the Drawer.js which has the home button which isn't responding:
<Drawer.Section style={styles.drawerSection}><DrawerItem
icon={({color, size}) => (
<Icon
name="home-outline"
color={color}
size={size}
/>
)}
label="Home"
onPress={() => {props.navigation.navigate('Home')}}
/>
<DrawerItem />
and finally the mainTab js:
const MainTabScreen = () => (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
>
<Tab.Screen
name="Home"
component={HomeStackScreen}
options={{
tabBarLabel: 'Home',
tabBarColor: '#009387',
tabBarIcon: ({ color }) => (
<Icon name="home" color={color} size={26} />
),
}}
/>
Try below code
<Drawer.Section style={styles.drawerSection}>
<DrawerItem
icon={({color, size}) => (
<Icon
name="Home"
color={color}
size={size}
/>
)}
label="Home"
onPress={() => {props.navigation.navigate('Home')}}
/>
<Drawer.Section />
I have a MainPage component, and in the MainPage component, there are PostList, Post, and Explain components as Stack.Screen. and i made Home component
this is my code
const home = () => {
return (
<View>
<Text>home</Text>
</View>
)
}
const MainPage = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="PostList"
component={PostList}
options={{headerShown: false}}
/>
<Stack.Screen
name="Post"
component={Post}
options={{headerShown: false}}
/>
<Stack.Screen
name="Explain"
component={Explain}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
};
And MainPage is wrapped with Tab.screen.
<Tab.Navigator>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
headerShown: false,
tabBarStyle: {display: 'none'},
tabBarIcon: ({color}) => (
<FontAwesome5 name="list" size={20} style={{color}} />
),
tabBarActiveTintColor: 'blue',
}}
/>
</Tab.Navigator>
I want to navigate to Home component using drawer navigation in MainPage component inside Tab.Screen.
so i tried like this code
<Drawer.Navigator initialRouteName="Home">
<Tab.Navigator>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
headerShown: false,
}}
/>
</Tab.Navigator>
</Drawer.Navigator>
but it doesn't work. How can i fix my code?
I am trying to open drawer from homeScreen. drawer is opening when I swipe right but. I want to open Draer onPress of menu Icon. But Its not working. I used openDrawer, toggleDrawer but nothing work.
here is my code
function MyDrawer() {
return (
<Drawer.Navigator initialRouteName="homeScreen">
<Drawer.Screen name="homeSreen" component={homeScreen}
options={{
headerLeft: () => <Icon
name="menu"
size={25}
color="#D4AF37"
onPress={() => navigation.toggleDrawer()}
/>
}}
/>
</Drawer.Navigator>
);
}
function App({ navigation }) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="splashScreen" component={splashScreen} options={{headerShown: false}} />
<Stack.Screen name="loginScreen" component={loginScreen} options={{headerShown: false}} />
<Stack.Screen name="homeScreen" component={MyDrawer} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
in react-navigation V5
navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());
Try with adding navigation in function MyDrawer()
like this function MyDrawer({navigation}) {...}
You can use this.props.navigation.openDrawer() to open drawer
<TouchableOpacity
onPress={() => {
this.props.navigation.openDrawer();
}}>
<Icon name="bars" size={21} color="rgb(112, 112, 112)" />
</TouchableOpacity>
I want to create drawer navigation like that
I able to add icons but don't know how to design right side like in the image
that's my drawer navigator
<Drawer.Navigator
drawerContent={(props) => <CustomDrawer {...props} />}
drawerStyle={{
width: '80%',
}}>
<Drawer.Screen name={strings.NAV_HOME} component={StackComp} />
<Drawer.Screen name={strings.NAV_MY_PROFILE} component={Proifle} />
<Drawer.Screen name={strings.NAV_SETTING} component={Setting} />
<Drawer.Screen
name={strings.NAV_MANAGE_BOOKING}
component={Booking}
/>
</Drawer.Navigator>
and that's my customize code
<DrawerContentScrollView
style={{backgroundColor: colors.themeColor, flex: 1}}
{...props}>
<View style={{flex: 1}}>
<View
style={{
flex: 1,
paddingTop: moderateScaleVertical(24),
}}>
<Image
source={imagePath.logo}
style={{marginLeft: moderateScale(16)}}
/>
<TouchableOpacity
onPress={() => navigation.navigate(strings.NAV_HOME)}
style={styles.drawCont}>
<Image source={imagePath.homeIcon} />
<Text style={styles.text}>{strings.HOME}</Text>
</TouchableOpacity>
</View>
</View>
</DrawerContentScrollView>
Can someone tell me how can I design it like in the image?
To create a drawer component you can check the official documentation here
You will then have to make use of icons such as MaterialCommunityIcons. First on your drawer navigator import MaterialCommunityIcons like this
import { MaterialCommunityIcons } from "#expo/vector-icons";
Then add an options props on screen navigation as shown
<Drawer.Screen name={strings.NAV_HOME} component={StackComp} options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}} />
nice to meet you.
pls check my code....
const Tab = createBottomTabNavigator();
const Main = () => {
return (
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: '#fda039',
activeBackgroundColor: 'transparent',
labelPosition: 'bottom-icon',
tabStyle: styles.tabStyle,
style: styles.tabBarStyle,
}}>
<Tab.Screen name="Home" component={Home}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color}/>,
tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 14}}>Hogar</Text>: null,
}}
/>
<Tab.Screen name="QRscan" component={ProfileScreen}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="qr-code-scanner" color={color}/>,
tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 14}}>QR Scan</Text>: null,
}}
/>
<Tab.Screen name="Help" component={Help}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="help" color={color}/>,
tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 16}}>Ayuda</Text>: null,
}}
/>
</Tab.Navigator>
);
It's my project code running now using React Native navigator.
It's using react bottom navigation.
You can rewrite the code like mine.
Thank you.
I currently have these navigators built:
const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: {backgroundColor: theme['primaryColor']},
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Logins" component={LoginScreen} />
<Stack.Screen name="Swipe" component={SwipeScreen} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
return (
<Root>
<NavigationContainer>
<Drawer.Navigator
screenOptions={{swipeEnabled: false}}
drawerContent={(props) => <SidebarComponent {...props} />}
initialRouteName="Login">
<Drawer.Screen name="List" component={MainStackNavigator} />
</Drawer.Navigator>
</NavigationContainer>
</Root>
);
I need to additionally add a TabNavigator to the "Swipe" screen so that i can build 3 more screens and swipe over them
You can create a TabNavigator with the screens you want. Then include it in your MainStackNavigator instead of the Swipe screen component.
First, you can create your TabNavigator like this.
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Screen1" component={Screen1} />
<Tab.Screen name="Screen2" component={Screen2} />
<Tab.Screen name="Screen3" component={Screen3} />
</Tab.Navigator>
);
};
Then, include it in your MainStackNavigator instead of the Swipe screen component like this.
const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: { backgroundColor: theme['primaryColor'] },
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Logins" component={LoginScreen} />
<Stack.Screen name="Tabs" component={TabNavigator} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
Please comment here if you have any problems regarding this.