Home  >  Q&A  >  body text

Show shadow for gorhom bottom form in React Native.

<p>I am using the gorhom/react-native-bottom-sheet library. I want to show the shadow box when the user slides up or down the bottom form. How to achieve this? Is it possible? Currently I have it set to show when isOpen, but I want it to show when swiping. I also tried wrapping it in a Touchable component to show the shadow box when isPressed is true, but it didn't work when moving the bottom form. </p> <pre class="brush:php;toolbar:false;">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, }, });</pre> <p><br /></p>
P粉148434742P粉148434742471 days ago515

reply all(1)I'll reply

  • P粉311089279

    P粉3110892792023-07-28 20:51:00

    Yes, it is possible. You need to use this library to add shadow effect to any component.

    Click this link for library

    If you need any help, please let me know!

    reply
    0
  • Cancelreply