Going back does not recalculate screen height when parent height is dynamic

Description

I have a native stack navigator inside a bottom sheet. The bottom sheet’s height is dynamic and depends on the currently focused screen. The problem is when going from a taller screen into a smaller one and then back UIViewControllerWrapperView and its children (RNSScreen & RNSScreenView) stay the size of the previous screen (check flipper screenshot below). Visually it is not changing anything, but taps are not registered anywhere below the old height.

Screenshots

Here I have the first screen where the whole area is tappable and navigates to the second small screen. When coming back, I can not tap anymore below the top 100px (the height of the second screen).

https://user-images.githubusercontent.com/25742/133996001-1c2a7f48-0220-40af-b4bf-c71c53cde0a7.mov

Currently, I’m changing the height via the useFocusEffect hook from react-navigation. The problem can go away if I do that on transitionEnd, but that would highly delay the animation.

I would be happy to start working on a snack but maybe there is a fast solution that I’m not aware of?

Package versions

• React: 17.0.2
• React Native: 0.65.1
• React Native Screens: 3.7.2

[somebody32]

@WoLewicki got it, thanks. So I’ll close the issue if nothing can be done here.

For anyone having the same problem, here is a fast hack that minimizes it:

let isFocused = useRef(true);
let sheetHeight = 400;

useFocusEffect(
  useCallback(() => {
    setBottomSheetHeight(sheetHeight);
  }, [setBottomSheetHeight, sheetHeight])
);

useEffect(() => {
  return navigation.addListener('focus', () => {
    isFocused.current = true;
  });
}, [navigation]);

useEffect(() => {
  return navigation.addListener('blur', () => {
    isFocused.current = false;
  });
}, [navigation]);

useEffect(() => {
  return navigation.addListener('transitionEnd', () => {
    if (!isFocused.current) {
      return;
    }

    // this is required to allow navigational controller to get new
    // view height, otherwise it would use the cached one from the previous
    // screen. And no, setImmediate is not working,
    // and yes, 0.3 is the minimum value that works
    setBottomSheetHeight(sheetHeight + 0.3);
    setTimeout(() => {
      setBottomSheetHeight(sheetHeight);
    }, 0);
  });
}, [navigation, setBottomSheetHeight, sheetHeight]);

[WoLewicki]

1. and 3. are caused by the native navigation, which was said in previous comment.
2. is probably due to the memoization or just how react works.

createStackNavigator does not use native animation transition options, it is fully controlled from the JS by Animated and react-native-gesture-handler. I am not sure if we can do much about it unfortunately.