Skip to content

Commit

Permalink
fix(iOS): right header incorrect position (#2316)
Browse files Browse the repository at this point in the history
## Description

This PR fixes the incorrect position of the custom header items when
updating more than one option at the same time. The proposed solution
let us remove the previous fix for a similar problem:
#2248 which
only fixed the issue on fabric.

Fixes #432, #2231.

## Changes

- forced re-layout of the navigation controller when subviews are
updated
- removed previous fix
- updated `Test432` repro

<!--

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before

### After

-->

## Test code and steps to reproduce

- use `Test432` and `Test2231` to test this fix on both architectures.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
  • Loading branch information
alduzy authored Sep 27, 2024
1 parent 53695c3 commit bc95fa4
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 9 deletions.
28 changes: 22 additions & 6 deletions apps/src/tests/Test432.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,34 @@ type RootStackParamList = {
};
type RootStackScreenProps<T extends keyof RootStackParamList> =
NativeStackScreenProps<RootStackParamList, T>;

const HomeScreen = ({ navigation }: RootStackScreenProps<'Home'>) => {
const showSettings = useCallback(() => {
navigation.navigate('Settings');
}, [navigation]);
const [x, setX] = React.useState(false);
React.useEffect(() => {
navigation.setOptions({
headerBackVisible: !x,
headerRight: x
? () => (
<View style={{ backgroundColor: 'green', width: 20, height: 20 }} />
)
: () => (
<View style={{ backgroundColor: 'green', width: 10, height: 10 }} />
),
});
}, [navigation, x]);

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={showSettings} title={'Show settings'} />
<Button title="Tap me for header update" onPress={() => setX(!x)} />
<Button
title={'Show settings'}
onPress={() => navigation.navigate('Settings')}
/>
</View>
);
};

const SettingsScreen = ({ navigation }: RootStackScreenProps<'Settings'>) => {
const SettingsScreen = () => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Settings</Text>
Expand All @@ -47,7 +63,7 @@ const RootNavigator = () => {
[navigation],
);
return (
<RootStack.Navigator screenOptions={{ headerShown: false }}>
<RootStack.Navigator>
<RootStack.Screen name="Home" component={HomeScreen} />
<RootStack.Screen
name="Settings"
Expand Down
3 changes: 3 additions & 0 deletions ios/RNSScreenStackHeaderConfig.mm
Original file line number Diff line number Diff line change
Expand Up @@ -681,6 +681,9 @@ + (void)updateViewController:(UIViewController *)vc
break;
}
}
// We're forcing a re-layout when the subviews change,
// see: https://github.com/software-mansion/react-native-screens/pull/2316
[navctr.view layoutIfNeeded];
}

// This assignment should be done after `navitem.titleView = ...` assignment (iOS 16.0 bug).
Expand Down
3 changes: 0 additions & 3 deletions ios/RNSScreenStackHeaderSubview.mm
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,6 @@ - (void)updateLayoutMetrics:(const react::LayoutMetrics &)layoutMetrics
self);
} else {
self.bounds = CGRect{CGPointZero, frame.size};
// We're forcing the parent view to layout this subview with correct frame size,
// see: https://github.com/software-mansion/react-native-screens/pull/2248
[self.superview layoutIfNeeded];
}
}

Expand Down

0 comments on commit bc95fa4

Please sign in to comment.