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?

score 3 · Answer 1 · edited Feb 15 '23 at 19:40

// 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.

simple and great answer, spend 2 hour on github of same library. — Somnath Kadam, Apr 08 '21 at 19:06

score 1 · Answer 2 · answered Nov 17 '20 at 08:23

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>
    );
  }
}

score 0 · Answer 3 · edited Nov 17 '20 at 10:06

0

You should wrap your code with:

  <Animated.View
            style={{
              opacity: Animated.add(0.1, Animated.multiply(fall, 1.0)),
              flex: 1,
            }}>
  <Animated.View/>

Note: except bottom sheet View.

edited Nov 17 '20 at 10:06

Ivan Aracki

4,861
11
59
73

answered Nov 17 '20 at 07:58

Yasir Munir

67
4

1

Please add some details to your answer. Code only answers don't help to understand your answer – TheTanic Nov 17 '20 at 09:03

score 0 · Answer 4 · answered Dec 27 '20 at 14:55

  <BottomSheet initialSnapIndex={0} snapPoints={snapPoints}>
    <BottomSheetScrollView style={{backgroundColor: '#341f97'}}>
      <View>
        <Text>test</Text>
      </View>
    </BottomSheetScrollView>
  </BottomSheet>

Give Backgroundcolor to BottomSheetScrollView To change the background color of Bottom Sheet

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

4 Answers4