iOS - Landscape to portrait rotation briefly shows removed screen on pop

Description

If we are in landscape mode, pop a screen, and immediately rotate to portrait, the popped screen will still show for half a second ( I assume while it is being unmounted).

Screenshots

https://user-images.githubusercontent.com/48869228/142239454-fc6913a9-a973-4335-bfa4-39c61c10fd95.mov

mov file most likely won’t play in the browser and needs to be downloaded.

Steps To Reproduce

1. Switch to landscape
2. Push a screen
3. Pop the screen and immediately rotate to portrait
4. Observe

Expected behavior

Previous screen should not be visible.

Actual behavior

Popped screen is visible for half a second.

Reproduction

This is the animation config I’m using, which may or not be related. I will try to reproduce with the sample app when I get a chance.

const animationConfig = {
  animation: 'spring',
  config: {
    stiffness: 1200,
    damping: 200,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 0.1,
    restSpeedThreshold: 0.1,
    useNativeDriver: true,
  },
};

const {multiply} = Animated;
const animationInterp = ({current, next, inverted, layouts: {screen}}) => {
  const translateFocused = multiply(
    current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [screen.width, 0],
      extrapolate: 'clamp',
    }),
    inverted,
  );

  const translateUnfocused = next
    ? multiply(
        next.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, screen.width * -0.8],
          extrapolate: 'clamp',
        }),
        inverted,
      )
    : 0;

  const overlayOpacity = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 0.1],
    extrapolate: 'clamp',
  });

  const shadowOpacity = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 0.3],
    extrapolate: 'clamp',
  });

  return {
    cardStyle: {
      transform: [
        // Translation for the animation of the current card
        {translateX: translateFocused},
        // Translation for the animation of the card on top of this
        {translateX: translateUnfocused},
      ],
    },
    overlayStyle: {opacity: overlayOpacity},
    shadowStyle: {shadowOpacity},
  };
};

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
react-native	0.65.1
@react-navigation/native	5.9.4
@react-navigation/native-stack	5.14.9
react-native-screens	3.9.0
react-native-safe-area-context	3.3.2
react-native-gesture-handler	1.10.3
react-native-reanimated	1.13.2
expo	-

[cristianoccazinsp]

We still can’t upgrade to the native navigators as we have some very customized headers, and also we use the same transition animations for iOS and Android (the native android one is pretty bad for our app at least). But yes, we would like to go that route eventually.

[shelzTimesignature]

things like navigation should’ve been handled by react native team. its been 3 years now we still facing the same issue