Skip to content

Fix/drawer nav #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 24, 2021
Merged

Fix/drawer nav #98

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5831019
Merge pull request #92 from GeekyAnts/minor
surajahmed Sep 21, 2021
50f74f5
Merge pull request #94 from GeekyAnts/minor
surajahmed Sep 22, 2021
bf83703
fix: drawer navigation
rayan1810 Sep 24, 2021
f9454a6
fix: drawer navigation version
rayan1810 Sep 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 84 additions & 75 deletions docs/buildingDrawerNavigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,14 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f

Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB.

```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@5.1.0,@react-navigation/drawer,@react-navigation/native@5.0.8,react-native-vector-icons,react-native-gesture-handler@1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@3.0.0,react-native-reanimated@2.1.0
```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@6.0.2,@react-navigation/drawer@6.1.3,@react-navigation/native@6.0.2,react-native-vector-icons,react-native-gesture-handler@~1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@~3.4.0,react-native-reanimated@~2.2.0
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import {
createDrawerNavigator,
DrawerContentScrollView,
} from '@react-navigation/drawer';
import {
MaterialCommunityIcons
} from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import {
NativeBaseProvider,
Button,
Expand All @@ -31,110 +29,122 @@ import {
Center,
HStack,
Divider,
Icon
Icon,
} from 'native-base';
const Drawer = createDrawerNavigator();
function Component(props) {
return (
<HStack alignItems="center" mt="6">
<Pressable onPress={() => props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1">
<HamburgerIcon ml="2" size="sm"/>
</Pressable>
<Center flex={1} >
<Heading size="md">{props.route.name}</Heading>
</Center>
</HStack>
<Center flex={1}>
<Heading size="md">{props.route.name} Screen</Heading>
<Button colorScheme="indigo" mt="4" onPress={() => props.navigation.toggleDrawer()}>
Open Drawer
</Button>
</Center>
);
}

const getIcon = (screenName) => {
switch (screenName) {
case 'Inbox':
return "email"
return 'email';
case 'Outbox':
return 'send'
return 'send';
case 'Favorites':
return 'heart'
return 'heart';
case 'Archive':
return 'archive'
return 'archive';
case 'Trash':
return 'trash-can'
return 'trash-can';
case 'Spam':
return 'alert-circle'
return 'alert-circle';
default:
return undefined
return undefined;
}
}
};

function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props} safeArea>
<VStack space="6" my="2" mx="1">
<Box px="4">
<Text bold color="gray.700">Mail</Text>
<Text fontSize="14" mt="1" color="gray.500" fontWeight="500">john_doe@gmail.com</Text>
</Box>
<VStack divider={<Divider />} space="4">
<VStack space="3">
{props.state.routeNames.map((name, index) => (
<Pressable
px="5"
py="3"
rounded="md"
bg={index === props.state.index ? 'rgba(6, 182, 212, 0.1)' : 'transparent'}
onPress={(event) => {
props.navigation.navigate(name);
}}
>
<VStack space="6" my="2" mx="1">
<Box px="4">
<Text bold color="gray.700">
Mail
</Text>
<Text fontSize="14" mt="1" color="gray.500" fontWeight="500">
john_doe@gmail.com
</Text>
</Box>
<VStack divider={<Divider />} space="4">
<VStack space="3">
{props.state.routeNames.map((name, index) => (
<Pressable
px="5"
py="3"
rounded="md"
bg={
index === props.state.index
? 'rgba(6, 182, 212, 0.1)'
: 'transparent'
}
onPress={(event) => {
props.navigation.navigate(name);
}}>
<HStack space="7" alignItems="center">
<Icon
color={index === props.state.index ? 'primary.500' : 'gray.500'}
size="5" as={<MaterialCommunityIcons name={getIcon(name)}/>} />
<Text fontWeight="500" color={index === props.state.index ? 'primary.500' : 'gray.700'}>
{name}
color={
index === props.state.index ? 'primary.500' : 'gray.500'
}
size="5"
as={<MaterialCommunityIcons name={getIcon(name)} />}
/>
<Text
fontWeight="500"
color={
index === props.state.index ? 'primary.500' : 'gray.700'
}>
{name}
</Text>
</HStack>
</Pressable>
))}
</VStack>
<VStack space="5">
<Text fontWeight="500" fontSize="14" px="5" color="gray.500">Labels</Text>
<Text fontWeight="500" fontSize="14" px="5" color="gray.500">
Labels
</Text>
<VStack space="3">
<Pressable
px="5"
py="3"
>
<Pressable px="5" py="3">
<HStack space="7" alignItems="center">
<Icon
color='gray.500'
size="5" as={<MaterialCommunityIcons name='bookmark'/>} />
<Text color='gray.700' fontWeight="500">
color="gray.500"
size="5"
as={<MaterialCommunityIcons name="bookmark" />}
/>
<Text color="gray.700" fontWeight="500">
Family
</Text>
</HStack>
</Pressable>
<Pressable
px="5"
py="2"
>
<Pressable px="5" py="2">
<HStack space="7" alignItems="center">
<Icon
color='gray.500'
size="5" as={<MaterialCommunityIcons name='bookmark'/>} />
<Text color='gray.700' fontWeight="500">
color="gray.500"
size="5"
as={<MaterialCommunityIcons name="bookmark" />}
/>
<Text color="gray.700" fontWeight="500">
Friends
</Text>
</HStack>
</Pressable>
<Pressable
px="5"
py="3"
>
<Pressable px="5" py="3">
<HStack space="7" alignItems="center">
<Icon
color='gray.500'
size="5" as={<MaterialCommunityIcons name='bookmark'/>} />
<Text fontWeight="500" color='gray.700'>
color="gray.500"
size="5"
as={<MaterialCommunityIcons name="bookmark" />}
/>
<Text fontWeight="500" color="gray.700">
Work
</Text>
</HStack>
Expand All @@ -148,17 +158,16 @@ function CustomDrawerContent(props) {
}
function MyDrawer() {
return (
<Box safeArea flex={1} >
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen name="Inbox" component={Component} />
<Drawer.Screen name="Outbox" component={Component} />
<Drawer.Screen name="Favorites" component={Component} />
<Drawer.Screen name="Archive" component={Component} />
<Drawer.Screen name="Trash" component={Component} />
<Drawer.Screen name="Spam" component={Component} />
</Drawer.Navigator>
<Box safeArea flex={1}>
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Inbox" component={Component} />
<Drawer.Screen name="Outbox" component={Component} />
<Drawer.Screen name="Favorites" component={Component} />
<Drawer.Screen name="Archive" component={Component} />
<Drawer.Screen name="Trash" component={Component} />
<Drawer.Screen name="Spam" component={Component} />
</Drawer.Navigator>
</Box>
);
}
Expand Down