Is it possible to add Easing to Entering and Exiting animations in React Native Reanimated like animatable?

Question

I am using React Native Reanimated for entering and exiting animations. All is working good but I can not get Easing added to it?

I have tried everything listed in the Docs but it does not have the desired effect. If I use Animatable, also from swmansion, I can add it easily like:-

      <Animatable.Text
        style={[
          styles.mainContentText,
          { fontSize: 14, color: 'darkgrey', fontWeight: 700 },
        ]}
        animation="bounceInLeft"
        easing="ease-out-quint"
        delay="900"
        iterationCount="1">
        Coventry - 0.2 Miles
      </Animatable.Text>

If I try to add it to the entering animation like this and no good. Easing is also imported from reanimated.

   entering={BounceInLeft.duration(500).delay(400).easing="ease-out-quint"}> or
   entering={BounceInLeft.duration(500).delay(400).easing.ease-out-quint}> or
   entering={BounceInLeft.duration(500).delay(400).easing(ease-out-quint)}> or
   entering={BounceInLeft.duration(500).delay(400).easing("ease-out-quint")}> 

The docs refer to withTiming, so I have tried things like:-

    entering={ZoomInEasyUp.duration(500).delay(800).withTiming(1, {
          easing: Easing.inOut(Easing.quad),

Is this possible or should I stick with animatable? Although this has issues with android and I suspect performance?

Thanks in advance

Answer 1

I have managed to do it like so :-

entering={level > 0 && ZoomIn.delay(500).duration(500).easing(Easing.bezier(0.25, 2.5, 0.25, 1))}