moti

What is moti?

Moti is a library for animations in React Native, providing a simple and declarative API to create smooth and complex animations with ease. It leverages Reanimated 2 under the hood to offer performant animations.

What are moti's main functionalities?

Basic Animations

This code demonstrates a basic fade-in animation using Moti. The MotiView component animates its opacity from 0 to 1 over a duration of 1000 milliseconds.

import React from 'react';
import { View } from 'react-native';
import { MotiView } from 'moti';

export default function App() {
  return (
    <MotiView
      from={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ type: 'timing', duration: 1000 }}
      style={{ width: 100, height: 100, backgroundColor: 'blue' }}
    />
  );
}

Complex Animations

This example shows how to create a more complex animation with Moti, where a view scales and rotates simultaneously. The transition uses a spring animation for a more natural effect.

import React from 'react';
import { View } from 'react-native';
import { MotiView } from 'moti';

export default function App() {
  return (
    <MotiView
      from={{ scale: 0.5, rotate: '0deg' }}
      animate={{ scale: 1, rotate: '360deg' }}
      transition={{ type: 'spring', damping: 10 }}
      style={{ width: 100, height: 100, backgroundColor: 'red' }}
    />
  );
}

Layout Animations

This code sample demonstrates layout animations with Moti. A view's height animates in and out when toggled, showcasing how Moti can handle dynamic layout changes.

import React from 'react';
import { View, Button } from 'react-native';
import { MotiView } from 'moti';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  return (
    <View>
      <Button title="Toggle" onPress={() => setVisible(!visible)} />
      {visible && (
        <MotiView
          from={{ height: 0 }}
          animate={{ height: 100 }}
          exit={{ height: 0 }}
          style={{ backgroundColor: 'green' }}
        />
      )}
    </View>
  );
}

Other packages similar to moti

react-native-reanimated

React Native Reanimated is a library for creating animations in React Native. It provides a low-level API for building animations, which Moti uses under the hood to offer a higher-level, declarative API. While Reanimated is more flexible and powerful for custom animations, Moti simplifies the process for common use cases.

react-native-animatable

React Native Animatable is another library for animations in React Native, offering a simple API for common animations. Compared to Moti, it is easier to use for basic animations but lacks the performance optimizations and advanced capabilities provided by Reanimated 2, which Moti leverages.

lottie-react-native

Lottie for React Native is used for rendering animations exported from Adobe After Effects. It is ideal for complex animations created by designers. While Lottie focuses on rendering pre-made animations, Moti is more about creating animations programmatically within the app.

README

The universal React Native animation library, powered by Reanimated 3.

<MotiView from={{ opacity: 0 }} animate={{ opacity: 1 }} />

Documentation & Examples

• Documentation
• Installation
• Examples

Next.js Conf

I spoke at at Next.js Conf 2021 on October 26 about React Native + Next.js. Watch the video to see how we do it.

Highlights

• Universal: works on all platforms
• 60 FPS animations on the native thread
• Mount/unmount animations, like framer-motion
• Powered by Reanimated 3
• Web support, out-of-the-box
• Expo support
• Intuitive API
• Variants
• Strong TypeScript support
• Highly-configurable animations
• Sequence animations
• Loop & repeat animations

Preview

• API
• Unmount animations with exit
• exitBeforeEnter animations

Follow

Follow me on Twitter to stay up to date.

Sponsor

Please reach out to Fernando Rojo if you're interested in sponsoring Moti.