Docs and TS definitions don't mention that BottomSheet accepts `safeArea` props

[rparrett]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

Hello, thanks for maintaining this library.

I just migrated from rneui, motivated partially by BottomSheet fixes but encountered an issue.

Expected behavior

In the provided screenshot, I would expect is that the white container should reach the bottom of the screen.

Describe the bug

The SafeAreaView wraps the "content container", so the content container doesn't extend to the bottom of the screen when it's "unsafe." This means that you can see the underlay at the bottom of the screen.

Steps To Reproduce

I'm not an expo user, but here's some code that can be pasted into a snack.

Expand Code

import { useState } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { BottomSheet } from '@rn-vui/themed';

export default function App() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.toggleTouchable}
        onPress={() => setIsVisible(true)}
      >
        <Text>Open Bottom Sheet</Text>
      </TouchableOpacity>
      <BottomSheet
        onBackdropPress={() => setIsVisible(false)}
        isVisible={isVisible}
        scrollViewProps={{ style: styles.bottomSheetScrollView }}
        containerStyle={styles.bottomSheetContainer}
        backdropStyle={styles.bottomSheetBackdrop}
      >
        <Text>Inside Bottom Sheet</Text>
      </BottomSheet>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
  },
  toggleTouchable: { padding: 16 },
  bottomSheetScrollView: {
    backgroundColor: 'red',
    alignItems: 'center',
    paddingVertical: 40
  },
  bottomSheetContainer: {
    backgroundColor: 'yellow'
  },
  bottomSheetBackdrop: {
    backgroundColor: 'green'
  }
});

Screenshots

Your Environment

`npx @rn-vui/envinfo`

npm error code E404
npm error 404 Not Found - GET https://registry.npmjs.org/@rn-vui%2fenvinfo - Not found
npm error 404
npm error 404  '@rn-vui/envinfo@*' is not in this registry.
npm error 404
npm error 404 Note that you can also install from a
npm error 404 tarball, folder, http url, or git url.

yarn list v1.22.19
├─ @rn-vui/base@5.1.8
├─ @rn-vui/ratings@0.5.0
└─ @rn-vui/themed@5.1.8
✨  Done in 0.12s.

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username). Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[deepktp]

Hi @rparrett,

I’ve checked the BottomSheet component, and confirmed that it is indeed wrapped in a SafeAreaView. However, the behavior of SafeAreaView can be customized as needed.

You can pass edges porp to prevent bottom safe area insets

To demonstrate this, I’ve put together a simple Snack example:
👉 https://snack.expo.dev/@deepktp/55b576

Need Fix : Documentations doesn't mention that Bottom-sheet accept all Safe Area View props we will fix this soon.

Hope this helps!

[rparrett]

Thanks for the workaround! That is helpful, but I would still consider the current behavior surprising. If you disagree, feel free to close the issue.

Additionally, the workaround would have been difficult to discover because the typescript types don't indicate that it is possible to use SafeAreaView's props in BottomSheet.