import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { BottomSheet } from "react-native-btr";

export default function BottomSheetDemo() {
  const [visible, setVisible] = useState(false);

  function toggle() {
    setVisible((visible) => !visible);
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={toggle}>
        <View style={styles.button}>
          <Text>Toggle BottomSheet</Text>
        </View>
      </TouchableOpacity>
      <BottomSheet
        visible={visible}
        onBackButtonPress={toggle}
        onBackdropPress={toggle}
      >
        <View style={styles.card}>
          <Text>Place your custom view inside BottomSheet</Text>
        </View>
      </BottomSheet>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    backgroundColor: "#fff",
    borderWidth: 2,
    borderRadius: 50,
    padding: 16,
  },
  card: {
    backgroundColor: "#fff",
    height: 250,
    justifyContent: "center",
    alignItems: "center",
  },
});

I am using the above code. So my problem is i am getting the bottom sheet as expected. And i want that it will 100px above the bottom. That is also working fine. But the thing is i am getting bottom and at top blur black background. But i want on the bottom margin bottom 100. It will not show that black ground. I will start from marginbottom:100. But bottom background will be transparent and i can do click on bottom items.

CodePudding user response：

TLDR: working source code. Be aware, this solution might get messy.

If we see the source code of react-native-btr then we will see that the BottomSheet component is actually a Modal component from react-native-modal passing 4 basic props to react-native-modal as shown below

<Modal
  isVisible={visible}
  onBackButtonPress={onBackButtonPress}
  onBackdropPress={onBackdropPress}
  style={{ justifyContent: "flex-end", margin: 0 }}
>
  {children}
</Modal>

So, what I did is, extract all the source code from react-native-modal which is just five files and modify this source code. I have put a new prop for react-native-modal called bottomSpacing, so that user can change the bottom spacing.

Back in app.js the code is looking like this

  <Modal
    testID={"modal"}
    isVisible={isModalVisible}
    style={{ justifyContent: "flex-end", margin: 0 }} // this line was using in react-native-btr source
    bottomSpacing={BOTTOM_SPACING}>
    <View style={styles.card}>
      <Text>Place your custom view inside BottomSheet</Text>
    </View>
  </Modal>

Here, BOTTOM_SPACING is used both in bottomSpacing props and the styles.card as following

  card: {
    marginBottom: BOTTOM_SPACING,
    ...
  }

Bonus: Now you can use all the features of react-native-modal such as changing the color of the shadow and the opacity of that shadow etc.