React Native: Remove a back button from navigation stack?

Question

So I have a navigation stack that constantly adds pages to it. The user can go to the previous page, or the next page. Like a sign up page.

So for example, here is a page with 3 screens (previous page, current page, next page)

function MyStack() {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Current"
        component={ContentFunction}
        options={{headerTransparent: true, headerTitle: ''}}
      />
      <Stack.Screen name="Back" component={BackFunction} />
      <Stack.Screen
        name="Next"
        component={FirstNamePage}
        options={{
          headerTransparent: true,
          headerTitle: '',
          headerBackTitle: 'Gender',
        }}
      />
    </Stack.Navigator>
  );
}

The problem is, the buttons are piling on top of each other. See below.

What I need is to delete the old button, but I don't know how to do that. Of course I could do it with setting:

   <Stack.Screen
        name="Next"
        component={FirstNamePage}
        options={{
          headerLeft: null
        }}
      />

But I cannot do this unless I am on that specific function. How do I go about doing this?

Answer 1

Try this

    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >

  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

Reference :- Hide header in stack navigator React navigation