gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://gorhom.dev/react-native-bottom-sheet/
MIT License
7.11k stars 780 forks source link

[v4] When executing snapToIndex (index), the customized backdrop does not respond #1924

Closed haoynmail closed 1 month ago

haoynmail commented 3 months ago

Bug

When executing snapToIndex (index), the customized backdrop does not respond

Environment info

Library Version
@gorhom/bottom-sheet 4.6.4
react-native 0.74.5
react-native-reanimated 3.10.1
react-native-gesture-handler 2.16.2
expo 51.0.23

Steps To Reproduce

  1. The screen does not respond when clicking the button
  2. Dragging the bottom sheet produces the expected result

Reproducible sample code

import React, { useCallback, useRef, useMemo } from "react"; import Animated, { Extrapolate, interpolate, useAnimatedStyle, } from "react-native-reanimated"; import { StyleSheet, View, Text, Button } from "react-native"; import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet"; import {GestureHandlerRootView} from 'react-native-gesture-handler';

const CustomBackdrop = ({ animatedIndex,style }) => { // animated variables

const containerAnimatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
        animatedIndex.value,
        [0, 1, 2],
        [0, 0.5, 1],
        Extrapolate.CLAMP
    ),
}));

// styles
const containerStyle = useMemo(
    () => [
        style,
        {
            backgroundColor: "#a8b5eb",
        },
        containerAnimatedStyle,
    ],
    [style, containerAnimatedStyle]
);

return <Animated.View style={containerStyle} />;

};

export default function BackdropComponentExercise() { // hooks const sheetRef = useRef(null);

// variables
const snapPoints = useMemo(() => ["25%", "50%", "75%"], []);

// callbacks
const handleSheetChange = useCallback((index) => {
    //console.log("handleSheetChange", index);
}, []);
const handleSnapPress = useCallback((index) => {
    sheetRef.current?.snapToIndex(index);
}, []);
const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
}, []);

// render
return (
  <GestureHandlerRootView>
    <View style={styles.container}>
        <Button title="Snap To 75%" onPress={() => handleSnapPress(2)} />
        <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
        <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
        <Button title="Close" onPress={() => handleClosePress()} />
        <BottomSheet
            ref={sheetRef}
            snapPoints={snapPoints}
            onChange={handleSheetChange}
            backdropComponent={(props) =>
                <CustomBackdrop {...props}/>
            }
        >
            <BottomSheetView>
                <Text>Awesome ??</Text>
            </BottomSheetView>
        </BottomSheet>
    </View>
  </GestureHandlerRootView>
);

};

const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 200, }, });

github-actions[bot] commented 2 months ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 1 month ago

This issue was closed because it has been stalled for 5 days with no activity.