React Native Animations and Transitions

This project created to helps mobile developers using animations and transitions with react native by showing usage examples, rendering time and benchmarks.

How to run project?

This project is a yarn workspaces (mono-repository), so to run a one of modules only you need to execute these two commands in Terminal:

yarn worksapce [module-name] start --> to start react native package manager.

yarn worksapce [module-name] android --> to run the project in your device/emulator.

React native animatable

It is a library that provides animations and transitions for react native apps.

Installation

We just need to add react-native-animatable package to our project.

Usage

This library provides three animatable class components View, Text and Image, they can be used like below, e.g:

<Animatable.View animation="fadeIn">
    <Text>Fade me in</Text>
</Animatable.View>

<Animatable.Image animation="rotate" source={{ uri: imageUri }}" style={{ width: 480, height: 480}}/>

<Animatable.Text animation="zoomInUp" iterationCount="infinite">Zoom me up, Scotty</Animatable.Text>

You can add this property iterationCount="infinite" to make animation loop for the animated component.

ScreenShots

• bounce
• flash
• jello
• pulse
• rotate
• rubberBand
• shake
• swing
• tada
• wobble

Bouncing Entrances

• bounceIn
• bounceInDown
• bounceInUp
• bounceInLeft
• bounceInRight

Bouncing Exits

• bounceOut
• bounceOutDown
• bounceOutUp
• bounceOutLeft
• bounceOutRight

Fading Entrances

• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInUp
• fadeInUpBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig

Fading Exits

• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutUp
• fadeOutUpBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig

Flippers

• flipInX
• flipInY
• flipOutX
• flipOutY

Lightspeed

• lightSpeedIn
• lightSpeedOut

Sliding Entrances

• slideInDown
• slideInUp
• slideInLeft
• slideInRight

Sliding Exits

• slideOutDown
• slideOutUp
• slideOutLeft
• slideOutRight

Zooming Entrances

• zoomIn
• zoomInDown
• zoomInUp
• zoomInLeft
• zoomInRight

Zooming Exits

• zoomOut
• zoomOutDown
• zoomOutUp
• zoomOutLeft
• zoomOutRight

Benchmarks

A list of render time durations for different animations.

Animations	Rendering duration
Fade	90 ms
Slide	99 ms
Zoom	105 ms
Flip	97 ms
Bounce	65 ms
Flash	86 ms
Jello	116 ms
Pulse	98 ms
Rotate	72 ms
Rubber Band	92 ms
Shake	102 ms
Swing	91 ms
Tada	108 ms
Wobble	107 ms

React Native Pose

Installation

Only what you need is to add this package react-native-pose to your project.

Usage

Screenshots

Benchmarks

React Native Fluid Transition

Installation

Usage

Screenshots