Moti has the same API for transforms as a normal React Native component.
It also comes with some added convenience.
Like always, you can use a
Writing a transform array can be bulky. You can also pass your transforms directly:
If you're using multiple transforms, be sure to retain their order inside of each prop.
This only works with Reanimated
2.3.0+. For older versions, scroll down.
This will break your animation, since they have different orders:
If you prefer to use an array for multiple transforms, you can do that too. Be sure to retain the order of your transforms across props.
The following only applies if you're using Reanimated
2.2or older. As of
2.3.0, you can use multiple transforms without an array if you want.
If you're using multiple transforms together, such as
translateY, and you're using Reanimated
2.2 or older, you must use an array.
This example is okay, since
scale is the only transform:
But this won't work:
Make sure the order in the
animate prop is the same. In this case, we put
transform works like normal. Simply pass an array in place of your value
That's equivalent to doing this: