React-native-screens: Go back gesture on iOS to translucent header has weird behavior

[chybisov]

Description

When swiping back on iOS from view with _not translucent_ header to _translucent_ one there is an issue during transition like on the screenshot below. Current header becomes translucent and we can see how previous view transition to its place.

Is this a bug or do I need to explicitly set white color for that header somewhere?

Maybe related to #803

Screenshots

NativeStackNavigationOptions

const whiteScreenOptions: NativeStackNavigationOptions = {
  headerTitle: 'Create package',
  headerShown: true,
  headerHideShadow: true,
  headerBackTitleVisible: false,
  headerTopInsetEnabled: true,
  headerTintColor: Colors.grey[900],
};

const translucentScreenOptions: NativeStackNavigationOptions = {
  headerTitle: '',
  headerShown: true,
  headerTranslucent: true,
  headerStyle: {
    backgroundColor: 'transparent',
  },
  headerHideShadow: true,
  headerBackTitleVisible: false,
  headerTopInsetEnabled: true,
  headerTintColor: Colors.grey[900],
};

Steps To Reproduce

1. Create view with translucent header and place something there to see the actual issue during transition.
2. Create view with not translucent header and try to go back to above one on iOS with swipe gesture.

Expected behavior

This part of the view should stay white till the end of the transition.

Package versions

@react-navigation/native: 5.9.2
expo: 40.0.1
react: 17.0.1
react-native: 0.63.4
react-native-screens: 2.17.1

[chybisov]

@WoLewicki could you please help with this? 😃

[WoLewicki]

The header has its own transition on iOS, so the opacity is transforming from 1 to 0, which gives this effect. The solutions I can think of is to:

1. Use headerShown: false instead of transparent background color in the previous screen to not have the transition of headers between screens
2. Use simple_push transition: https://github.com/software-mansion/react-native-screens/pull/761 (currently you have to set gestureEnabled to false to disable default transition on swipe gesture, after we find a way to provide the custom transition for swipe gesture, we will probably merge it).

Can I help you more with this?

[chybisov]

@WoLewicki thank you for reply! The second option is sweet and probably the correct resolution for this problem. The first one is not so great, because in this case I will have to develop my own header component for hamburger button and titles on other screens (I use headerLeft, headerCenter, headerRight options there now).

Do you have any plans or estimation regarding the second option? 👍

[WoLewicki]

I don't want to provide any dates because it is quite uncertain and I am not sure how hard it is going to be. Also, I am always open for any PRs regarding this ofc :smile:.

[WoLewicki]

@chybisov I recently updated #761 and now I can spot that iOS still animates the header since it is not part of the screen transition, but rather some kind of internal UINavigationController's UINavigationBar transition. Therefore, I am afraid that the 2. option is not available even with custom transition style.

[chybisov]

@WoLewicki thank you! I'll try my luck with option 1 then. 😃

[WoLewicki]

Can I close this issue then? I don't think there is much to be added here.