You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
so im making a custom bottom sheet, i have a button to dismiss it, and user can also drag the notch to dismiss it, now the exit animation is different for both actions since the translate Y for the exit animation when user is dragging is dynamic,
now the animation works fine, both closing the drawer with button and closing by dragging
notice i didnt pass any initialValues for the exit animation, so that the bottom sheet doesnt jump to inital then animate to final when its supposed to animate from where the user dragged it to
but i get this error from Reanimated in the console [Reanimated] Initial values for animation are missing for property transform.0.translateY
my question now is, what is the correct way to handle this? or should reanimated make initial values optional? or is there a way to mute the error?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
so im making a custom bottom sheet, i have a button to dismiss it, and user can also drag the notch to dismiss it, now the exit animation is different for both actions since the translate Y for the exit animation when user is dragging is dynamic,
Now i have this
const customExiting = (values: ExitAnimationsValues) => {
"worklet";
const animations = {
transform: [
{
translateY: withTiming(values.currentHeight, {
duration: 300,
easing: Easing.out(Easing.ease),
}),
},
],
};
const initialValues = {};
return {
initialValues,
animations,
};
};
and i have this for the pan gesture
const pan = Gesture.Pan()
.onBegin((event) => {
translateYSharedValue.value = event.translationY + 20;
})
.onChange((event) => {
translateYSharedValue.value = Math.max(event.translationY, 20);
})
.onFinalize((event) => {
const shouldDismiss =
translateYSharedValue.value > 100 || event.velocityY > 500;
if (shouldDismiss) {
translateYSharedValue.value = withTiming(
drawerHeight.value,
{
duration: 300,
easing: Easing.out(Easing.ease),
},
() => {
runOnJS(closeComponent)();
}
);
} else {
translateYSharedValue.value = withSpring(20, {
mass: 2,
stiffness: 150,
damping: 20,
velocity: event.velocityY,
});
}
});
and i use like this
<Animated.View
entering={customEntering}
exiting={customExiting}
style={[styles.drawer, animatedStyles]}
onLayout={onLayout}
>
<GestureDetector gesture={pan}>
<View style={styles.drawerNotchWrapper}>
<View style={styles.drawerNotch}></View>
</View>
</GestureDetector>
{params[1].component}
</Animated.View>
now the animation works fine, both closing the drawer with button and closing by dragging
notice i didnt pass any initialValues for the exit animation, so that the bottom sheet doesnt jump to inital then animate to final when its supposed to animate from where the user dragged it to
but i get this error from Reanimated in the console
[Reanimated] Initial values for animation are missing for property transform.0.translateY
my question now is, what is the correct way to handle this? or should reanimated make initial values optional? or is there a way to mute the error?
Beta Was this translation helpful? Give feedback.
All reactions