Callback for custom exiting animation

[Tobbb]

according to documentation there should be some way to attach a callback to a custom animation but there is little information on how to implement such callback

currently I have this custom animation
`import { withTiming } from 'react-native-reanimated'

export const PermissionExiting = (values) => {
'worklet'
const animations = {
originY: withTiming(2000, { duration: 2000 }),
opacity: withTiming(0, { duration: 2000 }),
}
const initialValues = {
originY: values.currentOriginY,
opacity: 1,
}
const callback = (finished: boolean) => {}
return {
initialValues,
animations,
callback,
}
}
`

used like this

<Animated.View exiting={PermissionExiting} >

how would I attach a callback to the exiting animation? unlike remade animations .withCallback() is not working

[tomekzaw]

Hey, probably here:

const callback = (finished: boolean) => { /* animation ended or has been cancelled */ }

[Tobbb]

The problem with this approach is that functions outside of the animation does not work, the following code crashes with value is undefined, expected an Object

`const handleGoBack = () => {
console.log(34534534534)
}

const PermissionExiting = (values) => {
'worklet'
const animations = {
originY: withTiming(2000, { duration: 2000 }),
opacity: withTiming(0, { duration: 2000 }),
}
const initialValues = {
originY: values.currentOriginY,
opacity: 1,
}
const callback = (finished: boolean) => {
handleGoBack()
}
return {
initialValues,
animations,
callback,
}
}`

[neiker]

This is an old question, but in case someone is looking for an answer, here it is:

function SomeAwesomeComponent() {
  return (
    <Animated.View
      collapsable={false}
      entering={CustomEnteringAnimation(() => {
        // your callback
      })}
    >
      {/*  Your content */}
    </Animated.View>
  );
}


function CustomEnteringAnimation(callback: () => void) {
  return () => {
    "worklet";

    return {
      animations: {
        opacity: withTiming(1),
        transform: [
          {
            scale: withTiming(1)
          },
          {
            translateY: withTiming(1)
          }
        ]
      },
      initialValues: {
        transform: [{ scale: 0 }, { translateY: 200 }],
        opacity: 0
      },
      callback: (finished: boolean) => {
        if (finished) {
          runOnJS(callback)();
        }
      }
    };
  };
}