/Javascript/React/How to style navigation drawer react navigation v5

How to style navigation drawer react navigation v5

import * as React from 'react';
import {
  View,
  Text,
  StyleSheet,
  useWindowDimensions,
  Button,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { Feather } from '@expo/vector-icons';
import { createStackNavigator } from '@react-navigation/stack';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function TabNav() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="TabOne"
        component={() => (
          <View style={styles.container}>
            <Text>TabOne</Text>
          </View>
        )}
      />
      <Tab.Screen
        name="TabTwo"
        component={() => (
          <View style={styles.container}>
            <Text>TabTwo</Text>
          </View>
        )}
      />
    </Tab.Navigator>
  );
}

const StackNav = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Feed" component={Feed} />
      <Stack.Screen name="Article" component={Article} />
    </Stack.Navigator>
  );
};

function CustomDrawerContent(props) {
  const width = useWindowDimensions().width * 0.3;

  return (
    <DrawerContentScrollView {...props}>
      <View style={styles.menuContainer}>
        <View
          style={[
            styles.menuItemsCard,
            { backgroundColor: '#fff2df', width: width, height: width },
          ]}>
          <>
            <View
              style={[styles.circleContainer, { backgroundColor: '#FFC56F' }]}>
              <Feather travel name="briefcase" size={25} color="#fbae41" />
              <DrawerItem
                label="Screen1"
                labelStyle={{ color: '#fbae41', fontSize: 10 }}
                onPress={() => {
                  props.navigation.navigate('Screen1');
                }}
              />
            </View>
          </>
          <DrawerItem
            style={{
              position: 'absolute',
              left: 0,
              width: width,
              height: width,
            }}
            label="Screen2"
            labelStyle={{ color: '#609806' }}
            onPress={() => {
              props.navigation.navigate('Screen1');
            }}
          />
        </View>
        <View
          style={[
            styles.menuItemsCard,
            { backgroundColor: '#EFFFD5', width: width, height: width },
          ]}>
          <View
            style={[styles.circleContainer, { backgroundColor: '#b5ff39' }]}>
            <Feather Medical name="briefcase" size={25} color="#609806" />
          </View>

          <DrawerItem
            style={{
              position: 'absolute',
              left: 0,
              width: width,
              height: width,
            }}
            label="Screen2"
            labelStyle={{ color: '#609806' }}
            onPress={() => {
              props.navigation.navigate('StackNav');
            }}
          />
        </View>
      </View>
    </DrawerContentScrollView>
  );
}

function MyDrawer() {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Screen1" component={StackNav} />
      <Drawer.Screen name="StackNav" component={TabNav} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

function Feed({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
      <Button
        title={'Article'}
        onPress={() => navigation.navigate('Article')}
      />
    </View>
  );
}

function Article({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Article Screen</Text>
      <Button title={'Feed'} onPress={() => navigation.navigate('Feed')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  menuContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
  },
  menuItemsCard: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  circleContainer: {
    width: 50,
    height: 50,
    borderRadius: 25,
    padding: 10,
  },
});

Source: stackoverflow.com

Similar codes

7 votes160 views3 answers
Conditional style prop react
Javascript React
1 vote123 views1 answer
Stream closed react native
Javascript React
33 votes117 views3 answers
React routes
Javascript React
12 votes121 views4 answers
Uninstall material ui react
Javascript React
0 vote134 views1 answer
React if event.target is input
Javascript React
0 vote120 views1 answer
Difference in push and navigate in react Navigation
Javascript React
0 vote124 views1 answer
React interactions
Javascript React
7 votes114 views1 answer
React Hook "React.useState" is called in function "placeItem" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
17 votes151 views4 answers
React native geolocation
Javascript React
1 vote77 views1 answer
How to change the value of state in react
Javascript React