Breaking News: Grepper is joining You.com. Read the official announcement!

Change Look Of Drawer Menu React Native Navigator

Add Answer

Javasper answered on November 28, 2020 Popularity 10/10 Helpfulness 2/10

answer Change Look Of Drawer Menu React Native Navigator

related set navigation drawer to open by default react native

related CSS for Drawer Navigation In React Native

related how to style navigation drawer react navigation v5

related Adding Title To Drawer Navigator React Native

related Adding A Title To Your Drawer Navigator React Native

Change Look Of Drawer Menu React Native Navigator

Comment

function MyDrawer() {
  return (
    <Drawer.Navigator
      useLegacyImplementation   screenOptions={{
      
          drawerLabelStyle: {
      color: "red",
    
            fontSize: 25,
          },
        }}
  
   
    >
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

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

export default App;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: drawer javascript menu navigator react-native

Link to this answer
Share Copy Link

Contributed on Sep 26 2022

Javasper

0 Answers Avg Quality 2/10

Closely Related Answers

set navigation drawer to open by default react native

Comment

 <Drawer.Navigator
      initialRouteName="Home"
      openByDefault>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
 </Drawer.Navigator>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: default

Link to this answer
Share Copy Link

Contributed on Nov 28 2020

Dayanaohhnana

0 Answers Avg Quality 2/10

CSS for Drawer Navigation In React Native

Comment

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      useLegacyImplementation
      screenOptions={{
        drawerStyle: {
          backgroundColor: 'red',
          width: 240,
        },
      }}
    >
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

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




export default App;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 26 2022

Javasper

0 Answers Avg Quality 2/10

how to style navigation drawer react navigation v5

Comment

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,
  },
});

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 07 2022

Lucas Bueno

0 Answers Avg Quality 2/10

Adding Title To Drawer Navigator React Native

Comment

  <Drawer.Navigator initialRouteName="HomeScreen"  screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: 'transparent',
          elevation: 0,
          shadowOpacity: 0,
        },
        headerTitle: '',
      }}

      drawerContent={props => <CustomDrawer {...props} />}
  >

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: drawer javascript navigator navi

Link to this answer
Share Copy Link

Contributed on Jan 01 2023

Javasper

0 Answers Avg Quality 2/10

Adding A Title To Your Drawer Navigator React Native

Comment

import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList} from '@react-navigation/drawer';

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: drawer javascript navigator react-native title

Link to this answer
Share Copy Link

Contributed on Dec 31 2022

Javasper

0 Answers Avg Quality 2/10

Change Look Of Drawer Menu React Native Navigator

Contents

More Related Answers

Change Look Of Drawer Menu React Native Navigator

Closely Related Answers

set navigation drawer to open by default react native

CSS for Drawer Navigation In React Native

how to style navigation drawer react navigation v5

Adding Title To Drawer Navigator React Native

Adding A Title To Your Drawer Navigator React Native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.