[v4] Container offset calculation doesn't support landscape orientation

[joeporpeglia]

Bug

While in landscape orientation, BottomSheetContainer is using the portrait window height to compute animatedContainerOffset.bottom value. This bottom offset is then used to compute animatedKeyboardHeightInContainer, which results in extra space between the keyboard and the bottom sheet content.

Example:

• bottom sheet content height = 375
• keyboard height = 209
• portrait window height = 812
• final keyboard offset: 209 - (812 - 375) = 228

These calculations are done in BottomSheetContainer and BottomSheet.

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.3
react-native	0.69.7
react-native-reanimated	2.9.1
react-native-gesture-handler	2.5.0

Steps To Reproduce

1. Render a full height bottom sheet with a bottom sheet text input
2. Switch to landscape orientation
3. Focus on the input

Describe what you expected to happen:

1. Bottom offset animates to the top of the keyboard (no space between the keyboard and bottom sheet content)

Reproducible sample code

Having a hard time getting this snack to run 🤔
https://snack.expo.dev/FcJeOyJNw

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[piechoo]

This issue still persists, this shouldn't be closed 😕

[aendel]

+1

[ansarikhurshid786]

+1

[joeporpeglia]

@gorhom can we reopen this one? I didn't respond in time to prevent the bot from closing 😅

[eirikluka]

@gorhom – This seems to still be an issue

[gorhom]

Could you check if this issue occurs on v5?

[eirikluka]

Could you check if this issue occurs on v5?

I haven't got the chance to test, but looking at the code the constant WINDOW_HEIGHT seems to still be used, which I believe is the root of the problem.

const { height: WINDOW_HEIGHT, width: WINDOW_WIDTH } = Dimensions.get('window'); – this doesn't change on orientation change.

https://github.com/gorhom/react-native-bottom-sheet/blob/v5/src/components/bottomSheetContainer/BottomSheetContainer.tsx#L58

[eirikluka]

Can we reopen this, @gorhom ?