How to use a hook with screenOptions with v7 Static Router?

[bnussman]

I want to dynamically change screenOptions depending on my UI libraries theme. What is the best way to do this with the new v7 static router?

export function Drawer() {
  const { colorMode } = useColorMode();
  const { user } = useUser();

  return (
      <Drawer.Navigator
        screenOptions={{
          drawerType: "front",
          headerTintColor: colorMode === "dark" ? "white" : "black",
        }}
      >
        <Drawer.Screen name="Beep" component={StartBeepingScreen} />
        <Drawer.Screen name="Cars" component={Cars} />
        <Drawer.Screen name="Edit Profile" component={EditProfileScreen} />
        <Drawer.Screen name="Beeps" component={BeepsScreen} />
        <Drawer.Screen name="Ratings" component={RatingsScreen} />
        <Drawer.Screen name="Feedback" component={Feedback} />
      </Drawer.Navigator>
  );
}

[bnussman]

Oh wow. Turns out you can just use a hook directly in screenOptions 🎉

export const Drawer = createDrawerNavigator({
  screenOptions: () => {
    const { colorMode } = useColorMode();
    return {
      headerTintColor: colorMode === "dark" ? "white" : "black",
      drawerType: "front",
    }
  },
  drawerContent: (props: DrawerContentComponentProps) => <CustomDrawerContent {...props} />,
  screens: {
    Ride: MainFindBeepScreen,
    Beep: StartBeepingScreen,
    Cars: Cars,
    'Edit Profile': EditProfileScreen,
    Beeps: BeepsScreen,
    Ratings: RatingsScreen,
    Feedback: Feedback,
  },
});