How do I use buttons/icons on drawer items when building my custom drawer in react native?

Question

I am trying to make a custom drawer in my react native navigation drawer, where I am trying to put icons and buttons instead of drawer screen components. Some of my code is put here for reference:

function CustomDrawerContent(props: DrawerContentComponentProps) {
   <DrawerContentScrollView {...props} >          
            <DrawerItemList {...props} />
            <DrawerItem
                label="Facebook"
                onPress={() => Linking.openURL('https://www.facebook.com/mysite/')}
                inactiveTintColor="black"  
            />
            <DrawerItem
                label="Instagram Page"
                onPress={() => Linking.openURL('https://www.instagram.com/mysite/')}
                inactiveTintColor="black"
            />
        </DrawerContentScrollView>

I am trying to put these drawer items as buttons/icons for the Facebook and Instagram pages for my site, where users will be directed to. May I know how I can achieve this?

Answer 1

You can add icon and style to your DrawerItem.

<DrawerItem
  label="Instagram Page"
  icon={({ focused, color, size }) => {
    return <Icon color={color} size={size} />;
  }}
  style={{ borderRadius: 50 }}
  onPress={() => Linking.openURL("https://www.instagram.com/mysite/")}
  inactiveTintColor="black"
/>

The icon prop return a React Element, you can see more about the prop and other details here