Okay, since last night I'm trying animate the clip from backdrop blur.
Actually it works transform the entire component, something like that:
const backdropBlurClip = useMemo(
() => rrect(rect(0, 0, FORM_WIDTH, FORM_HEIGHT), 8, 8),
[FORM_WIDTH, FORM_HEIGHT]
);
const xBackdropBlur = useSharedValue((width / 2) - (FORM_WIDTH / 2));
const yBackdropBlur = useSharedValue(height - (FORM_HEIGHT) - (height * 0.112676056));
const transformBackdropBlur = useDerivedValue(() => [
{ translateX: xBackdropBlur.value },
{ translateY: yBackdropBlur.value },
]);
const backdropBlurClipKeyboardShow = () => {
xBackdropBlur.value = withTiming((width / 2) - (FORM_WIDTH / 2), { duration: 300 });
yBackdropBlur.value = withTiming((height / 2) - (FORM_HEIGHT / 1.2), { duration: 300 });
}
const backdropBlurClipKeyboardHide = () => {
xBackdropBlur.value = withTiming((width / 2) - (FORM_WIDTH / 2), { duration: 500 });
yBackdropBlur.value = withTiming(height - (FORM_HEIGHT) - (height * 0.112676056), { duration: 500 });
}
const handleKeyboardShow = () => {
backdropBlurLocationY.value = withTiming((height / 2) - (FORM_HEIGHT / 1.2), { duration: 300 });
}
const handleKeyboardHide = () => {
backdropBlurLocationY.value = withTiming(height - (FORM_HEIGHT) - (height * 0.112676056), { duration: 500 });
}
useEffect(() => {
const onShow = Keyboard.addListener("keyboardDidShow", () => {
handleKeyboardShow();
backdropBlurClipKeyboardShow();
});
const onHide = Keyboard.addListener("keyboardDidHide", () => {
handleKeyboardHide();
backdropBlurClipKeyboardHide();
});
return () => {
onShow.remove();
onHide.remove();
};
}, []);
This code will transform entire component, the next step is make only clip move but the BackdropBlur component receives a prop called clip with type AnimatedProp<ClipDef | undefided> i.e. the core of my question is... how can I make AnimatedStyle works in this context?