React Native / react-native-reanimated-bottom-sheet / How can I change the background color of the view behind the sheet?

Question

In the demo, the last two examples have a dark background, but I don't see a way to change it from transparent to dark, and I see nothing in the source code related to style or color. Any advice?

Answer 1

// Step 1: Import Libraries


import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import Animated from "react-native-reanimated";
import BottomSheet from "reanimated-bottom-sheet";

export const BottomSheetMask: React.FC = () => {

  // Step 2: Add The Following Lines In Your Component

  const sheetRef = useRef < BottomSheet > null;
  let fall = new Animated.Value(1);
  const animatedShadowOpacity = Animated.interpolate(fall, {
    inputRange: [0, 1],
    outputRange: [0.5, 0],
  });

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello React Native!</Text>
      <Button onPress={() => sheetRef.current?.snapTo(0)}>
        Open Bottom Sheet
      </Button>

      // Bottom Sheet Component

      <BottomSheet
        ref={sheetRef}
        callbackNode={fall} // Add ** fall ** Variable here.
        snapPoints={[700, 300, 0]}
        initialSnap={2}
        renderHeader={() => {
          // Your Header Component
        }}
        renderContent={() => {
          // Your Content Component
        }}
      />

      // Step 3: Add The Following Code Inside Your Component

      <Animated.View
        pointerEvents="none"
        style={[
          {
            ...StyleSheet.absoluteFillObject,
            backgroundColor: "#000",
            opacity: animatedShadowOpacity,
          },
        ]}
      />
    </View>
  );
};

Please Try The Following Steps.

Answer 2

you can use react-native-bottomsheet-reanimated This package because this package has backdrop capability

yarn add react-native-bottomsheet-reanimated

you have to use isBackDrop={true} and backDropColor="#eee" for change color of backdrop of bottomsheet like

import BottomSheet from 'react-native-bottomsheet-reanimated';
 
class Example extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <BottomSheet
          bottomSheerColor="#FFFFFF"
          ref="BottomSheet"
          initialPosition={'50%'} 
          snapPoints={['50%', '100%']}
          isBackDrop={true}
          isBackDropDismissByPress={true}
          backDropColor="red"             //======> this prop will change color of backdrop
          
          header={
            <View>
              <Text style={styles.text}>Header</Text>
            </View>
          }
          body={
            <View style={styles.body}>
              <Text style={styles.text}>Body</Text>
            </View>
          }
        />
      </View>
    );
  }
}