CODEWITHSUNDEEP
react-nativereact-navigationnavigation-drawer
Mahdi
Mahdi

Reputation: 216

How to align the drawer navigation items to bottom of the screen in react native?

I have a drawer navigation with permanent drawer type and I want to align the drawer items to bottom of the screen instead of the top. Like this photo: Drawer Navigation

The code I used to align the did not work for me:

drawerStyle: {
        backgroundColor: '#000',
        width: 80,
        justifyContent:'flex-end',
        alignItems:'flex-end'
      },

Upvotes: 1

Views: 1485

Answers (1)

Vu Phung
Vu Phung

Reputation: 705

Code for: https://i.sstatic.net/Ulr2r.png

export default function App() {
  const renderTabIcon = (sourceIcon) => () => {
    return (
      <Image
        style={{
          height: 20,
          width: 20,
          resizeMode: "contain",
        }}
        source={sourceIcon}
      />
    );
  };

  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Home"
        screenOptions={{
          drawerStyle: {
            width: 57,
          },
          drawerContentStyle: {
            flexDirection: "column-reverse",
          },
          drawerLabel: "",
        }}
      >
        <Drawer.Screen
          name="Home"
          component={HomeScreen}
          options={{
            drawerIcon: renderTabIcon(require("./home.png")),
          }}
        />
        <Drawer.Screen
          name="Search"
          component={SearchScreen}
          options={{
            drawerIcon: renderTabIcon(require("./search.png")),
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

More information: https://reactnavigation.org/docs/drawer-navigator/#screenoptions

Upvotes: 1

Related Questions