Expo // Example code

[thomasf1]

When trying the example code (it seems to be missing a Text import) to run it on Expo, It seems broken - the button gets displayed on top and then the sheet doesn´t come up but something renders on the top of the screen).

Here is the link (the example from the homepage with a small fix):
https://snack.expo.dev/YN-E5W2NEmGypBPrWLKhM?platform=web

Or am I doing something wrong?

[stanleyugwu]

Okay @thomasf1 I’ll look at it ASAP

[thomasf1]

Thanks - Is there a general issue or is there something that I missed?

[stanleyugwu]

I looked at the code and the problem is with the container View that wraps the components.

You have to add a flex of 1 to it so it's visible on the browser i.e Web, and you need to add justify-content so the Button doesn't hide under the status bar as there's no wrapping SafeAreView.

Here:

<View style={{flex:1,justifyContent:"center"}}>
      <Button title="Open" onPress={() => sheetRef.current?.open()} />
      <BottomSheet ref={sheetRef}>
        <Text>
          The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
        </Text>
      </BottomSheet>
</View>

[thomasf1]

Thanks. The modified example works well, tested it across devices. Feel free to include the Expo Snack example on the Readme - I´m sure it´ll help others :)

import React, { useRef } from 'react';
import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
import { Button, View, Text} from 'react-native';

const App = () => {
  const sheetRef = useRef(null);
  return (
    <View style={{flex:1,justifyContent:"center"}}>
      <Button title="Open" onPress={() => sheetRef.current?.open()} />
      <BottomSheet ref={sheetRef}>
        <Text>
          The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
        </Text>
      </BottomSheet>
    </View>
  );
};

export default App