@rootstrap/react-native-use-animate

React Native animations made simple.

Whether you are looking to get started with animations in React Native or you need to add a simple animation to your app and are looking for a simple and light weight option, this is the library for you.

This library contains some simple animation hooks that will cover simple use cases and some complex ones as well.

Demo

To test it out yourself you can clone this repo and go into the demo folder, then run expo start and open the app on a simulator or device.

Just for android

Since the demo is an expo project, we also have the app published on Expo. All you have to do is download the expo client app and scan the following QR code:

This is only available for Android since Apple has restrictions on how apps can be published.

Installation

yarn add @rootstrap/react-native-use-animate

npm install @rootstrap/react-native-use-animate --save

And that's it! No linking needed no matter which version of react-native you are running.

Usage

Simple Animation

import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import { useAnimate } from '@rootstrap/react-native-use-animate';

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

const AnimatedBox = () => {
  const animatedX = useAnimate({
    fromValue: 0,
    toValue: 100,
    duration: 1000,
    iterations: -1,
    bounce: true,
  });

  return (
    <Animated.View style={[styles.box, { left: animatedX.animatedValue }]} />
  );
};

Parallel Animations

import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import {
  useAnimate,
  useAnimateParallel,
} from '@rootstrap/react-native-use-animate';

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

const AnimatedBox = () => {
  const animatedOpacity = useAnimate({
    animate: false,
    bounce: true,
  });

  const animatedRotation = useAnimate({
    bounce: true,
    animate: false,
  });

  useAnimateParallel({
    animations: [animatedOpacity, animatedRotation],
    iterations: -1,
    duration: 1000,
  });

  return (
    <Animated.View
      style={[
        styles.box,
        {
          opacity: animatedOpacity.animatedValue,
          transform: [
            {
              rotate: animatedRotation.interpolate({
                outputRange: ['0deg', '360deg'],
              }),
            },
          ],
        },
      ]}
    />
  );
};

Sequenced Animations

import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import {
  useAnimate,
  useAnimateSequence,
} from '@rootstrap/react-native-use-animate';

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

const AnimatedBox = () => {
  const animatedX = useAnimate({
    fromValue: 0,
    toValue: 200,
    animate: false,
  });

  const animatedY = useAnimate({
    fromValue: 0,
    toValue: 200,
    bounce: true,
    animate: false,
  });

  useAnimateSequence({
    animations: [animatedX, animatedY],
    iterations: -1,
    duration: 1000,
  });

  return (
    <Animated.View
      style={[
        styles.box,
        {
          left: animatedX.animatedValue,
          top: animatedY.animatedValue,
        },
      ]}
    />
  );
};

Contributing

If you have an idea that could make this library better we would love to hear it. Please take a look at our Contributing Guidelines to get to know the rules and how to get started with your contribution.

License

@rootstrap/react-native-use-animate is available under the MIT license. See the LICENSE file for more info.

Credits

@rootstrap/react-native-use-animate is maintained by Rootstrap with the help of our contributors.