Hide "Navigate up" when pressing back button

[izyspania]

How do i hide the "Navigate up" from the back button when using react-navigation? It happens when i keep the back button pressed.

Navigate up Image

"@react-navigation/native": "^5.9.4",
"react-native": "0.71.12",
"react-native-screens": "3.19.0",

import { NativeStackNavigationProp, createNativeStackNavigator } from 'react-native-screens/native-stack'

 const NowStack = createNativeStackNavigator()

<NowStack.Navigator>
  <NowStack.Screen name="main" component={NowPlayingView} options={{ headerShown: false }} />
  <NowStack.Screen
    name="queue"
    component={NowPlayingQueue}
    options={{
      title: "Now",
      headerStyle: {
        backgroundColor: colors.gradient.high,
      },
      headerTitleStyle: {
        fontSize: 18,
        fontFamily: font.semiBold,
        color: colors.text.primary,
      },
      headerHideShadow: true,
      headerTintColor: 'white',
    }}
  />
</NowPlayingStack.Navigator>

somewhere else

const navigation = useNavigation();

<PressableOpacity onPress={() => navigation.navigate('queue')} disabled={disabled} hitSlop={16}>
  <IconMatCom name="playlist-play" size={24} color="white" />
  <Text numberOfLines={1} style={controlsStyles.text}>
    Capitole
  </Text>
</PressableOpacity>

[tboba]

Hi @izyspania, what environment have you used making the screenshot, attached to this discussion? Is it Android? How are you able to reproduce this popup - by holding the back button? If it's Android, which version are you using?

[izyspania]

Hi , its in android 12 emulator, yeah its happening all the time , im using a custom header because of that at the moment

[tboba]

Yeah, I don't think we've got something similar to set for now, but I've managed to edit this label natively:

And I think we can use headerBackTitle prop for implementing this on Android! @kkafar What do you think?
(This can be achieved with Toolbar#navigationContentDescription).

[kkafar]

Isn't headerTitle and title (as a fallback) responsible for settings the title on the toolbar?

It is

headerBackTitle changes the title of the back button on the iOS devices

It does. I believe it is unused on Android.

However naming the text in considered label / popup backTitle does not make sense for me.

[tboba]

Sure, let's think about other ways then.
I see two options there:

1. We can create an union for headerBackTitle:

headerBackTitle: string | {title: string, popup?: string}

Which will treat just a string as a title and will treat object for setting title and popup on Android - iOS will just use title prop there.
2. Create a new prop headerBackPopupTitle.

@kkafar What could be better in your opinion?

[kkafar]

I would go with new, separate prop, as I've mentioned earlier. We need to investigate whether this popup/label can be hidden / shown on demand.

[izyspania]

I just noticed that in emulator Google Photos has the same behavior i thought that is only happening in my app , i guess this is an android problem and not rns.

[tboba]

Yep @izyspania, seems like this is a native behavior - I'll just need to check if this popup can be disabled and we can introduce a PR for changing or disabling that label (if you still need to change this in your app).