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