How to add an image to drawer in react navigation 5?

user_12912544 0
Viewed 3032

I want to add an image to navigation drawer in react navigation 5, but the image does not display. my code is:

I dont know what Im doing wrong, please help me.


const DrawerNavigator = createDrawerNavigator();

export const AppNavigator = () => {
  const { user, setUser } = useContext(AppContext);
  return (
    <DrawerNavigator.Navigator
      drawerContent={(props) => {
        return (
          <SafeAreaView style={{ flex: 1 }}>
            <View
              style={{
                height: 100,
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Image
                source={require("../assets/logo.png")}
                width={50}
                height={50}
              />
            </View>
            <DrawerItemList {...props} />
          </SafeAreaView>
        );
      }}
    >
      {!user && <DrawerNavigator.Screen name="Login" component={Login} />}
    </DrawerNavigator.Navigator>
  );
};
react-native reactjs
2 Answers

I solved the problem. It was because I set the width and height directly at the component, and not in the style prop.

user_129125440

This code above worked for me. Just copy drawerContent and paste inside

    <DrawerNavigator.Navigator /* paste it here */ /> or
    <Drawer.Navigator /* paste it here */ /> or 
    <Navigator /* paste it here */ />

Make sure the image/icon actually in the project folder. Url links doesn't work. Also setting width, height doesn't work. Just add style={{}} and set width and height there. Then it should work. Lastly don't forget to import

    import { View, Image, SafeAreaView} from 'react-native';
user_108223060
Related