How to provide a custom style to React navigation drawer screen title

Question

I'm using React Navigation drawer and i want to have a different fontSize (custom styling) for each drawer screen title. Changing the labelStyle in the drawerContentOptions would change the fontSize for all the drawer screen titles and I wanna have each one customized.

<Drawer.Navigator
  drawerStyle={{
    backgroundColor: Colors.mainBackground,
    width: WIDTH * 0.6,
  }}

  drawerContentOptions={{
    activeTintColor: Colors.mainForeGround,
    itemStyle: { marginVertical: 8, marginHorizontal: 8 },
    labelStyle: {
      fontSize: 18,
    },
  }}
>
  <Drawer.Screen name="Profile" component={Profile}
    options={{
      title: 'Profile Name',
      drawerIcon: ({ color }) => {
        return <Icon name={'account'} size={ICON_SIZE} color={color} />
      },
    }}
  />
  <Drawer.Screen name="Menu" component={Menu}
    options={{
      title: 'Shopping menu',
      drawerIcon: ({ color }) => {
        return <Icon name={'menu'} size={ICON_SIZE} color={color} />
      },
    }}
  />
  <Drawer.Screen name="Cart" component={Cart}
    options={{
      title: 'Shopping cart',
      drawerIcon: ({ color }) => {
        return <Icon name={'cart'} size={ICON_SIZE} color={color} />
      },
    }}
  />
  <Drawer.Screen name="Settings" component={Settings}
    options={{
      title: 'Settings',
      drawerIcon: ({ color }) => {
        return <Icon2 name={'settings'} size={ICON_SIZE} color={color} />
      },
    }}
  />
</Drawer.Navigator>

Answer 1

Drawer.Navigator provides a prop called drawContent which needs to return a React component which will be used to render the contents of the drawer.

Usage:

function CustomDrawerContent(props) {
  return (
     <Here goes your code for rendering individual elements of your drawer>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

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

For full example, refer link