-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
Update docs after changes to headerBackTitle #1422
Conversation
✅ Deploy Preview for react-navigation-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this 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
**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]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you
Docs changes to: react-navigation/react-navigation#12543