Skip to content

Update docs after changes to headerBackTitle #1422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

maciekstosio
Copy link
Contributor

@maciekstosio maciekstosio commented Apr 10, 2025

Copy link

netlify bot commented Apr 10, 2025

Deploy Preview for react-navigation-docs ready!

Name Link
🔨 Latest commit 3cfc041
🔍 Latest deploy log https://app.netlify.com/sites/react-navigation-docs/deploys/67f797368ed4570008827604
😎 Deploy Preview https://deploy-preview-1422--react-navigation-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

@kkafar kkafar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks fine, since web is not mentioned here (?? 😄)

But let's wait with landing these until we land

react-navigation/react-navigation#12543

maciekstosio added a commit to react-navigation/react-navigation that referenced this pull request Apr 11, 2025
**Motivation**

The iOS has a default behavior how to deal with back title label - it
changes its size depending on available space. It didn't work for custom
back title, as react-native-screens used custom back button item when
custom back title was provided. This changes in
software-mansion/react-native-screens#2860, thus
we can remove check on react-navigation side.

Corresponding docs update:
react-navigation/react-navigation.github.io#1422

**Test plan**

See `Test code and steps to reproduce` in
software-mansion/react-native-screens#2860 or
test this snippet (very long custom back button title should be changed
to `Back`):


<details>
<summary>Source code</summary>

```
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { ParamListBase } from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';


export function FinalScreen({
  navigation,
}: {
  navigation: NativeStackNavigationProp<ParamListBase>;
}) {
  return (
    <View style={{ flex: 1, backgroundColor: 'yellow', justifyContent: 'center', alignItems: 'center' }}>
      <Text>VOID</Text>
      <Button title="Pop to top" onPress={() => navigation.popTo('Home')} />
    </View>
  );
}

export function Home({
  navigation,
}: {
  navigation: NativeStackNavigationProp<ParamListBase>;
}) {
  return (
    <View style={{ flex: 1, backgroundColor: 'yellow' }}>
      <Button
        title="Open screen"
        onPress={() => navigation.navigate('Second')}
      />
    </View>
  );
}

export default () =>{
  const Stack = createNativeStackNavigator();

  return (
      <Stack.Navigator>
        <Stack.Screen name="First" component={Home} />
        <Stack.Screen name="Second" component={FinalScreen} options={{headerBackTitle: 'LongLongLongLongLong'}} />
      </Stack.Navigator>
  );
};

```
</details>

⚠️ Keep in mind that it requires changes from screens to work

---------

Co-authored-by: Kacper Kafara <[email protected]>
Copy link
Member

@satya164 satya164 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you

@satya164 satya164 merged commit 66b5ec1 into main Apr 17, 2025
3 checks passed
@satya164 satya164 deleted the @maciekstosio/Update-docs-after-changes-to-headerBackTitle-prop branch April 17, 2025 18:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants