How to render a button inside screenOptions on Stack.Navigator?

Question

I'm still beginner in React Native and I'm trying to follow a tutorial from youtube to make a Drawer Menu.

I'm in a part of the tutorial, where I need to insert a button inside the screenOptions of my Stack.Navigator.

const Screens = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerTransparent: false,
        headerTitle: null,
        headerLeft: () => {
          <Button title="Menu" />;
        },
      }}>
      <Stack.Screen name="Dashboard" component={Dashboard} />
      <Stack.Screen name="Messages" component={Messages} />
      <Stack.Screen name="Contact" component={Contact} />
    </Stack.Navigator>
  );
};

My code is in accordance with the tutorial, but the problem is that in my code the button does not appear so that I can open Drawer.

Can you help me and tell me how do I render this button on my screen?

Here's my code I put in snack.expo.io, and here's the tutorial I'm trying follow, the button is inserted in the minute 14:40s.

Thank you very much for your help.

Answer 1

Everything is fine but you are not returning the button here,

Follow this code:

 <Stack.Navigator
      screenOptions={{
        headerTransparent: false,
        headerTitle: null,
        headerLeft: () => (
          <Button title="Menu" />
        ),
      }}>
     //rest of the code
 </Stack.Navigator>