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?
CodePudding user response:
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