Adds simple entrance and attention-seeking animations to a child component

React Native Simple Animations

A React Native component that adds simple entrance, exit, and attention-seeking animations to a child component. Works on iOS & Android.

Installation

npm install react-native-simple-animations --save

Usage

Import SimpleAnimation component:

import { SimpleAnimation } from 'react-native-simple-animations';

Use as follows:

<SimpleAnimation delay={500} duration={1000} fade staticType='zoom'>
	<Text>Hello, world!</Text>
</SimpleAnimation>

In the above example the Text component will fade and zoom in for 1000 milliseconds after waiting 500 milliseconds.

Configuration

You can configure SimpleAnimation by passing the following props:

prop type/valid values default description
aim "in", "out" "in" whether the child component will animate in or out; for example, if staticType is set to "zoom" and aim is set to "in" the child component will zoom in; if aim is set to "out" the child component will zoom out
animate boolean true when true the child component will animate, when false the child component will not animate
animateOnUpdate boolean false when true the child component will animate if any of the props change on it's parent SimpleAnimation component, when false the child component will not animate regardless of SimpleAnimation's props change
delay number 0 the length in milliseconds the component will wait before animating
direction "down", "left", "right", "up" null when movementType is set, this is the direction the child component will move
distance number 0 when movementType is set, this is the distance the child component will move
duration number 1000 the length in milliseconds the fade animation will last and the length the movement animation will last when movementType is set to "slide"
easing React Native Easing function Easing.out(Easing.exp) the easing function to define animation curve
fade boolean true when true the child component will fade in or out depending on the aim
friction number 5 when movementType is set to "spring" or staticType is set to "bounce" this is the amount of friction applied to the animation
movementType "slide", "spring" null when direction and distance are set, the type of movement animation
staticType "bounce", "zoom" null when set the child component will "bounce" or "zoom" in our out depending on the aim
style React Native ViewPropTypes.style null additional styles applied to the component
tension number 100 when movementType is set to "spring" or staticType is set to "bounce" this is the amount of friction applied to the animation
useNativeDriver boolean true when true the animation is sent to native before starting, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame

Demo Application

This repository contains a demo React Native application with a customizable example of the SimpleAnimation component in use. The demo application was built using Expo.

To use the demo application install Expo using the installation instructions located here, clone this repository, run the application using the expo-cli. Then open the application on the iOS Simulator, Gennymotion Android Emulator, or your mobile device.

  1. Clone this repository: https://github.com/joeyschroeder/react-native-simple-animations.git
  2. Navigate to the demo application: cd path/to/this/repository/react-native-simple-animations/example/reactreact-native-simple-animations-example-app
  3. Install demo application dependencies: npm install
  4. Run npm run start

Using the Expo CLI, you'll be able to view the demo application in the iOS Simulator or Gennymotion Android Android Emulator, or on your mobile device using the iOS Expo Client or Android Expo Client.

GitHub