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