React-Native: How to convert an animation from reanimated 2 to moti library?

Question

I am using react-native-reanimated in my react-native app. But I would like to transition my animations to moti.

I have a text I am animating based on the scroll position of my flatlist. By using the useAnimatedStyle hook, I can interpolate the scroll position input:

const animatedFontSize = useAnimatedStyle(() => ({
  fontSize: interpolate(scrollPosition.value, [0, maximumScrollHeight], [18, 12], {
    extrapolateRight: Extrapolation.CLAMP
  })
}))

return (
  <Animated.Text style={[animatedFontSize]}>
    {my text}
  </Animated.Text>
)

Can anyone help me to convert this dynamic animation to Moti? Most of the examples on the Moti site show rather "static" animations occurring once (e.g on mount/unmount). There is also the hook useDynamicAnimation. But how can I use it with an animation driven by a shared value?

No, I just want to animate the fontSize (from a max value to a min) and clamp the output value, as the user is scrolling through the list (up and down). There are plenty of examples with reanimated. I just could not find 1 with Moti — TheSoul, May 25 '22 at 12:28

score 0 · Answer 1 · answered Aug 24 '22 at 18:28

If you're on Moti 0.18+, you can also pass a derived value directly to the animate prop and it will react to shared values:

const animatedFontSize = useDerivedValue(() => ({
  fontSize: scrollPosition.value
}))

return (
  <MotiText animate={animate}>
    {my text}
  </MotiText>
)

This approach will automatically animate the value based on your transition prop. If you don't want this automatic animation, you can use the behavior below.

For what it's worth, anything that works on a Reanimated view works on a Moti view as well. Notice that this code is the same as yours, but with a MotiText instead of Animated.Text:

const animatedFontSize = useAnimatedStyle(() => ({
  fontSize: scrollPosition.value
}))

return (
  <MotiText style={animatedFontSize}>
    {my text}
  </MotiText>
)

React-Native: How to convert an animation from reanimated 2 to moti library?

1 Answers1