Backdrop overlay size doesnt reflect current device dimensions

[anniewey]

My app was forced to portrait orientation with android:screenOrientation="portrait".
If user first launch the app from horizontal orientation phone system, the backdrop size is taking the horizontal orientation as device width despite my app is in portrait orientation, hence not covering full height.

Screenshot reference here

I've tried to set wrapperStyle in App.tsx but not helping either.

const [deviceDimension, setDeviceDimension] = useState({
    width: deviceWidth,
    height: deviceHeight,
  });

 useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setDeviceDimension({ width: window.width, height: window.height });
    });

    return () => subscription?.remove();
  });

return(
<SafeAreaProvider>
      <StatusBar
        barStyle='dark-content'
        backgroundColor={Colour.White}
        translucent={true}
      />
      <TourGuideProvider
              preventOutsideInteraction
              {...{
                borderRadius: 16,
                androidStatusBarVisible: true,
                wrapperStyle: {
                  width: deviceDimension.width,
                  height: deviceDimension.height,
                },
                tooltipComponent: (props: TooltipProps) => <TourTooltip {...props} />,
              }}
            >
           ..
      </TourGuideProvider>
      <Toast config={toastConfig} />
      <ModalPortal />
);