[Bug]: `containerOffset` value ignored when using `BottomSheetModal`

[laijoann]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

Expectation:

When using BottomSheetModal with the containerOffset prop, I expected that offset to.. well, offset the container. E.g. if I pass in a value like useSharedValue({top: 0, bottom: 12, left: 0, right: 0}) and trigger the keyboard open, I'd expect the sheet to be offset from the keyboard by 12.

Reality:

No offsets are applied. In taking a look at BottomSheetModal, I see that the containerOffset value is pulled from useBottomSheetModalInternal. Further tracking that down, it appears BottomSheetModalProviderWrapper sets the animatedContainerOffset directly as useSharedValue(INITIAL_CONTAINER_OFFSET) without factoring in the user provided containerOffset.

react-native-bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx

Lines 69 to 75 in 398e711

	const {
	containerHeight,
	containerOffset,
	mountSheet,
	unmountSheet,
	willUnmountSheet,
	} = useBottomSheetModalInternal();

react-native-bottom-sheet/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx

Line 28 in 398e711

const animatedContainerOffset = useSharedValue(INITIAL_CONTAINER_OFFSET);

Reproduction steps

• Pass a value into containerOffset when using the BottomSheetModal
• Trigger a keyboard open by focusing on the BottomSheetTextInput
• Note the missing offset 😢

Reproduction sample

https://snack.expo.dev/@expojojo/bottom-sheet---issue-reproduction-template

Relevant log output

No response

[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.

[szarbartosz]

not sure if I'm using containerOffset as I should (description from docs is not that clear to me) but what I wanted to achieve was to make sure that content of my BottomSheetView (placed inside of the BottomSheetModal) has the correct bottom offset, which takes safe area insets into account:

const insets = useSafeAreaInsets();
const offset = useSharedValue({ bottom: insets.bottom, top: 0, left: 0, right: 0 });
  
return (
<BottomSheetModal
  ...
  containerOffset={offset}>
    <BottomSheetView>
    ...
    </BottomSheetView>
</BottomSheetModal>
)  

anyway - it does not work for me
versions:

"@gorhom/bottom-sheet": "^5.0.6",
"react-native-reanimated": "3.10.1",

[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.

[laijoann]

Not stale - containerOffset value is still ignored.

[davidcarboni]

I think I might be having a similar issue with keyboardBehavior, also on BottomSheetModal. Android works, but in iOS the keyboard covers the modal.

I've tried extend, fillparent and interactive but these don't seem to change the behaviour, hence I'm wondering if this is similar to the behaviour seen in this issue with containerOffset (I thought I'd comment rather than open a new issue for now).

Here's my code (showing current workaround based on Keyboard.addListener setting an isKeyboardVisible state value):

      <BottomSheetModalProvider>
        <BottomSheetModal
          ref={sheetRef}
          onChange={handleSheetChanges}
        >
          <BottomSheetView style={styles.modal}>
            <View style={styles.titleContainer}>
              <Text style={styles.modalTitle}>{title}</Text>
            </View>
            <View style={styles.fieldContainer}>
              <View style={styles.shortcutsContainer}>
                {shortcutsVisible && (<Shortcuts onPress={() => { setShortcutsVisible(true); }} sendKeys={sendKeys} />)}
              </View>
              <View style={styles.fieldSet}>
                <Field autofocus label={label} onChange={onChange} value={value} keyboardType={keyboardType} onFocus={() => { if (useShortcuts) setShortcutsVisible(true); }} onBlur={() => { if (useShortcuts) setShortcutsVisible(false); }} selection={selection} onSelectionChange={onSelectionChange} />
              </View>
            </View>

{/* Workaround: */}
            <View style={[styles.buttonsContainer, { paddingBottom: Platform.OS === 'ios' && isKeyboardVisible ? styles.buttonsContainer.paddingBottom + keyboardAvoidancePadding : styles.buttonsContainer.paddingBottom }]}> 
              <PrimaryButton text={primaryText || 'OK'} onPress={primary} />
              <SecondaryButton text={secondaryText || 'Cancel'} onPress={secondary} />
            </View>
          </BottomSheetView>

        </BottomSheetModal>
      </BottomSheetModalProvider>

[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.

[laijoann]

Not stale.

[mcabrams]

Existing issue, using @davidcarboni's suggested work around right now and it's nasty 😄

Also more issues related: #2161