Simple Animation Library For React Native – use-animate

Description:

A simple, lightweight component that adds animations to your React Native app.

Install & Import:

# Yarn
$ yarn add @rootstrap/react-native-use-animate
# NPM
$ npm i @rootstrap/react-native-use-animate --save

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

Basic Usage:

const styles = StyleSheet.create({
  box: {
    width: 200,
    height: 200,
    backgroundColor: '#222',
  },
});
const AnimatedBox = () => {
  const animatedX = useAnimate({
    fromValue: 0,
    toValue: 100,
    duration: 1000,
    iterations: -1,
    bounce: true,
  });
  return (
    <Animated.View style={[styles.box, { left: animatedX.animatedValue }]} />
  );
};

Preview: