skip to Main Content

I am using gorhom react-native-bottom-sheet. I need to show the shadowBox when user is swiping the bottom sheet up or down. How to do it and is it possible? For now I have set it to show on isOpen but need to show it on swipe. I also tried to wrap it inside a touchable that triggers isPressed to true and shows the ShadowBox, but it did not work when moving the bottom sheet.

 export default function BottomSheet() {
        const [isPressed, setIsPressed] = useState(false);
        const { t } = useTranslation();
        const [isOpen, setIsOpen] = useState(false);

    const bottomSheetModalRef = useRef(null);

    const snapPoints = ["50%"];

    function handlePresentModal() {
        bottomSheetModalRef.current?.present();
        setTimeout(() => {
            setIsOpen(true);
        }, 100);
    }
    return (
        <>
            <Button title="Present Modal" onPress={handlePresentModal} />
            <BottomSheetModalProvider>
                <StatusBar style="auto" />
                <BottomSheetModal
                    ref={bottomSheetModalRef}
                    index={0}
                    snapPoints={snapPoints}
                    handleComponent={CustomHandler}
                    onDismiss={() => setIsOpen(false)}
                >
                    <Spacer size={30} />
                    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
                   //Content here
                    </BottomSheetScrollView>
                </BottomSheetModal>
            </BottomSheetModalProvider>
            {isOpen && <ShadowBox />}
        </>
    );
}

const styles = StyleSheet.create({
    contentContainer: {
        paddingHorizontal: 16,
        paddingBottom: 100,
    },
});

2

Answers


  1. Yes,It’s possible ,
    You need to use this library for dropshadow for any components.

    Click this link for library

    Let me know anything require!.

    Login or Signup to reply.
  2. React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. Learn more with online native react course in pune

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search