stanleyugwu/react-native-bottom-sheet

Help changing the background color

paulo-hortelan opened this issue · 1 comments

I was unable to find anything on the documentation that shows how to change the background color. I've tried to change the style of the BoottomSheet but it is not working

...
const BottomComponent = ({ sheetRef }) => {

  return (
    <>
        <BottomSheet ref={sheetRef} styles={styles.container}>
          <View style={{backgroundColor: 'red'}}>
          <Text>The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀</Text>
          </View>
        </BottomSheet>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'red', // not working
  },
});
...

Hey @paulo-hortelan sorry I didn't attend to this earlier, I just pulled from the main branch and tried setting backgroundColor and it works very fine. Maybe something is wrong somewhere else in your code.

Here's the code I tested with:

import BottomSheet from '@devvie/bottom-sheet';

export default function App() {
  const sheetRef = React.useRef(null);

  return (
    <>
      <Button title="Open Sheet" onPress={() => sheetRef.current?.open()} />
      <BottomSheet ref={sheetRef} style={styles.container}>
        <Text style={styles.text}>
          The 😎smart, 📦tiny, and 🎗flexible bottom sheet your app craves
        </Text>
      </BottomSheet>
    </>
  );
}

const styles = StyleSheet.create({
  container: { backgroundColor: 'red' } // works fine
})