Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix: fix back button menu for headerBackTitleVisible prop #1646

Merged
merged 10 commits into from
Dec 2, 2022
Merged

fix: fix back button menu for headerBackTitleVisible prop #1646

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f968500
fix: fix backButtonMenu for headerBackTitleVisible
kacperkapusciak Nov 22, 2022
b316c04
chore: add test example
kacperkapusciak Nov 22, 2022
f74141b
fix: use back button mode minimal syntax
kacperkapusciak Nov 23, 2022
1b4899f
fix: check iOS version first
kacperkapusciak Nov 23, 2022
ae1f9b9
fix: check if backtitle is not null
kacperkapusciak Nov 23, 2022
eb14c21
chore: update examples
kacperkapusciak Nov 23, 2022
6cce851
fix: properly reset back button mode on fabric
kacperkapusciak Nov 23, 2022
c9cbdb4
fix: apply different solution to missing backtitle
kkafar Dec 1, 2022
6be82c5
fix: reset back button mode to default
kacperkapusciak Dec 2, 2022
21c69d4
chore: use newest reanimated rc in fabric example
kacperkapusciak Dec 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions FabricTestExample/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ import Test1391 from './src/Test1391';
import Test1419 from './src/Test1419';
import Test1473 from './src/Test1473';
import Test1476 from './src/Test1476';
import Test1646 from './src/Test1646';

enableFreeze(true);

Expand Down
46 changes: 46 additions & 0 deletions FabricTestExample/src/Test1646.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import {NavigationContainer, useRoute} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import * as React from 'react';
import {Button, View} from 'react-native';

const Stack = createNativeStackNavigator();

export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerBackTitleVisible: false,
}}>
<Stack.Screen
name="Screen"
component={Screen}
options={({route}: any) => ({title: route.params?.title ?? 'Hello'})}
/>
</Stack.Navigator>
</NavigationContainer>
);
}

function Screen({navigation}: any) {
const route = useRoute<any>();
const count = route.params?.count ?? 0;

// React.useEffect(() => {
// navigation.setOptions({headerBackTitleVisible: count % 2 === 0});
// }, [count, navigation]);

return (
<View>
<Button
onPress={() =>
navigation.push(route.name, {
title: `Hello ${count + 1}`,
count: count + 1,
})
}
title="Push a route"
/>
</View>
);
}
1 change: 1 addition & 0 deletions TestsExample/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ import Test1473 from './src/Test1473';
import Test1476 from './src/Test1476';
import Test1509 from './src/Test1509';
import Test1539 from './src/Test1539';
import Test1646 from './src/Test1646';

enableFreeze(true);

Expand Down
46 changes: 46 additions & 0 deletions TestsExample/src/Test1646.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import {NavigationContainer, useRoute} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import * as React from 'react';
import {Button, View} from 'react-native';

const Stack = createNativeStackNavigator();

export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerBackTitleVisible: false,
}}>
<Stack.Screen
name="Screen"
component={Screen}
options={({route}: any) => ({title: route.params?.title ?? 'Hello'})}
/>
</Stack.Navigator>
</NavigationContainer>
);
}

function Screen({navigation}: any) {
const route = useRoute<any>();
const count = route.params?.count ?? 0;

// React.useEffect(() => {
// navigation.setOptions({headerBackTitleVisible: count % 2 === 0});
// }, [count, navigation]);

return (
<View>
<Button
onPress={() =>
navigation.push(route.name, {
title: `Hello ${count + 1}`,
count: count + 1,
})
}
title="Push a route"
/>
</View>
);
}
13 changes: 12 additions & 1 deletion ios/RNSScreenStackHeaderConfig.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,18 @@ + (void)updateViewController:(UIViewController *)vc
}

#if !TARGET_OS_TV
if (config.backTitle != nil || config.backTitleFontFamily || config.backTitleFontSize ||
// Fix for github.com/react-navigation/react-navigation/issues/11015
// It allows to hide back button title and use back button menu as normal.
// Back button display mode and back button menu are available since iOS 14.
if (@available(iOS 14.0, *)) {
NSString *trimmedBackTitle =
[config.backTitle stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
// When an whitespace only back title is passed set back button mode to minimal.
if (config.backTitle != nil && [trimmedBackTitle length] == 0) {
navitem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeMinimal;
}
} else if (
config.backTitle != nil || config.backTitleFontFamily || config.backTitleFontSize ||
config.disableBackButtonMenu) {
RNSUIBarButtonItem *backBarButtonItem = [[RNSUIBarButtonItem alloc] initWithTitle:config.backTitle ?: prevItem.title
style:UIBarButtonItemStylePlain
Expand Down