How to animate the contents of the bottom sheets based on its position.

[uwemneku]

I would like to animate an image inside a bottom sheet based on the bottom sheet position. I'm fairly new to animations in react Native but I understand the basics of react Native reanimation.

My guess is that I can achieve this with the "animatedPosition" and "animatedIndex" props because that accept a shared value but I have no idea how to achieve this.

[gorhom]

Hi @uwemneku 👋,

thanks for highlighting this, i have added animatedPosition & animatedIndex to useBottomSheet for v4

#427

[uwemneku]

Hey, @gorhom thanks for replying and thanks for this awesome library. I found a way to animate the contents of the bottom sheet by using the onAnimate method to change a shared value .

const snapPoints = useMemo(() => ["10%", "30%", "60%", '100%'], [])
    const opacity = useSharedValue(0)
    const newStyles = useAnimatedStyle(()=>({
        opacity: interpolate(
            opacity.value,
            [0, 1, 2, 3],
            [0, 0.3, 0.5, 1],
            Extrapolate.CLAMP
        )
    }))
 return(
        <BottomSheet
            ref={bottomSheetRef}
            snapPoints={snapPoints}
            index={1}
            backdropComponent={BackDropComponent}
            onAnimate ={(a, b)=>{opacity.value = withSpring(b)}}
            
        >
            <Animated.View
             style={[newStyles, {
                 width:'100%',
                 height:"100%",
                 backgroundColor: "blue"
             }]}
            >

            </Animated.View>

        </BottomSheet>
    )

This did the trick. Thanks once more 🙂