Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
react-native-animatable
Advanced tools
Easy to use declarative transitions and animations for React Native
react-native-animatable is a popular library for React Native that provides a simple way to create animations. It offers a variety of pre-defined animations and allows for custom animations, making it easy to enhance the user interface of your application.
Pre-defined Animations
This feature allows you to use a variety of pre-defined animations like 'bounceIn', 'fadeIn', 'zoomIn', etc. The code sample demonstrates how to use the 'bounceIn' animation on a View component.
import React from 'react';
import { View, Text } from 'react-native';
import * as Animatable from 'react-native-animatable';
const Example = () => (
<Animatable.View animation="bounceIn" duration={1500}>
<Text>Bounce In Animation</Text>
</Animatable.View>
);
export default Example;
Custom Animations
This feature allows you to define custom animations by specifying keyframes. The code sample demonstrates how to create a custom animation that changes the opacity and position of a View component.
import React from 'react';
import { View, Text } from 'react-native';
import * as Animatable from 'react-native-animatable';
const customAnimation = {
0: { opacity: 0, translateY: -100 },
0.5: { opacity: 1, translateY: 0 },
1: { opacity: 0, translateY: 100 }
};
const Example = () => (
<Animatable.View animation={customAnimation} duration={2000}>
<Text>Custom Animation</Text>
</Animatable.View>
);
export default Example;
Looping Animations
This feature allows you to create looping animations by setting the 'iterationCount' property. The code sample demonstrates how to create a pulsing animation that loops indefinitely.
import React from 'react';
import { View, Text } from 'react-native';
import * as Animatable from 'react-native-animatable';
const Example = () => (
<Animatable.View animation="pulse" iterationCount="infinite">
<Text>Pulsing Animation</Text>
</Animatable.View>
);
export default Example;
react-native-reanimated is a powerful animation library for React Native that provides a more flexible and performant way to create animations. It offers a more complex API compared to react-native-animatable, allowing for more advanced animations and interactions.
react-native-lottie is a library for adding Lottie animations to your React Native app. Lottie animations are high-quality animations exported as JSON files from Adobe After Effects. This library is ideal for complex animations that are difficult to achieve with traditional animation libraries.
react-native-spring is a library that provides spring-based animations for React Native. It is inspired by the spring physics model and offers a different approach to animations compared to react-native-animatable, focusing on more natural and physics-based animations.
Declarative transitions and animations for React Native
$ npm install react-native-animatable --save
To animate things you must use the createAnimatableComponent
composer similar to the Animated.createAnimatedComponent
. The common components View
, Text
and Image
are precomposed and exposed under the Animatable
namespace. If you have your own component that you wish to animate, simply wrap it with a Animatable.View
or compose it with:
import * as Animatable from 'react-native-animatable';
MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);
<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>
To make looping animations simply set the iterationCount
to infinite
. Most animations except the attention seekers work best when setting direction
to alternate
.
<Animatable.Text animation="slideInDown" iterationCount={5} direction="alternate">Up and down you go</Animatable.Text>
<Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={{ textAlign: 'center' }}>❤️</Animatable.Text>
You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a duration
property, a spring animation will be used.
Note: If you are using colors, please use rgba()
syntax.
Note: Transitions require StyleSheet.flatten
available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.
<TouchableOpacity onPress={() => this.setState({fontSize: (this.state.fontSize || 10) + 5 })}>
<Animatable.Text transition="fontSize" style={{fontSize: this.state.fontSize || 10}}>Size me up, Scotty</Animatable.Text>
</TouchableOpacity>
Note: Other properties will be passed down to underlying component.
Prop | Description | Default |
---|---|---|
animation | Name of the animation, see below for available animations. | None |
duration | For how long the animation will run (milliseconds). | 1000 |
delay | Optionally delay animation (milliseconds). | 0 |
direction | Direction of animation, especially useful for repeating animations. Valid values: normal , reverse , alternate , alternate-reverse . | normal |
easing | Timing function for the animation. Valid values: custom function or linear , ease , ease-in , ease-out , ease-in-out , ease-in-cubic , ease-out-cubic , ease-in-out-cubic , ease-in-circ , ease-out-circ , ease-in-out-circ , ease-in-expo , ease-out-expo , ease-in-out-expo , ease-in-quad , ease-out-quad , ease-in-out-quad , ease-in-quart , ease-out-quart , ease-in-out-quart , ease-in-quint , ease-out-quint , ease-in-out-quint , ease-in-sine , ease-out-sine , ease-in-out-sine , ease-in-back , ease-out-back , ease-in-out-back . | ease |
iterationCount | How many times to run the animation, use infinite for looped animations. | 1 |
iterationDelay | For how long to pause between animation iterations (milliseconds). | 0 |
transition | What style property to transition, for example opacity , rotate or fontSize . Use array for multiple properties. | None |
onAnimationBegin | A function that is called when the animation has been started. | None |
onAnimationEnd | A function that is called when the animation has been completed successfully or cancelled. Function is called with an endState argument, refer to endState.finished to see if the animation completed or not. | None |
onTransitionBegin | A function that is called when the transition of a style has been started. The function is called with a property argument to differentiate between styles. | None |
onTransitionEnd | A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a property argument to differentiate between styles. | None |
useNativeDriver | Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling. | false |
isInteraction | Whether or not this animation creates an "interaction handle" on the InteractionManager. | false if iterationCount is less than or equal to one |
All animations are exposed as functions on Animatable elements, they take an optional duration
argument. They return a promise that is resolved when animation completes successfully or is cancelled.
import * as Animatable from 'react-native-animatable';
class ExampleView extends Component {
handleViewRef = ref => this.view = ref;
bounce = () => this.view.bounce(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled'));
render() {
return (
<TouchableWithoutFeedback onPress={this.bounce}>
<Animatable.View ref={this.handleViewRef}>
<Text>Bounce me!</Text>
</Animatable.View>
</TouchableWithoutFeedback>
);
}
}
To stop any ongoing animations, just invoke stopAnimation()
on that element.
You can also animate imperatively by using the animate()
function on the element for custom animations, for example:
this.view.animate({ 0: { opacity: 0 }, 1: { opacity: 1 } });
transition(fromValues, toValues[[, duration], easing])
Will transition between given styles. If no duration
or easing
is passed a spring animation will be used.
transitionTo(toValues[[, duration], easing])
This function will try to determine the current styles and pass it along to transition()
as fromValues
.
import * as Animatable from 'react-native-animatable';
class ExampleView extends Component {
handleTextRef = ref => this.text = ref;
render() {
return (
<TouchableWithoutFeedback onPress={() => this.text.transitionTo({ opacity: 0.2 })}>
<Animatable.Text ref={this.handleTextRef}>Fade me!</Animatable.Text>
</TouchableWithoutFeedback>
);
}
}
Animations can be referred to by a global name or a definition object.
An animation definition is a plain object that contains an optional easing
property, an optional style
property for static non-animated styles (useful for perspective
, backfaceVisibility
, zIndex
etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or from
and to
. Inspect the source in the definitions
folder to see more in depth examples.
A simple fade in animation:
const fadeIn = {
from: {
opacity: 0,
},
to: {
opacity: 1,
},
};
<Animatable.Text animation={fadeIn} >Fade me in</Animatable.Text>
Combining multiple styles to create a zoom out animation:
const zoomOut = {
0: {
opacity: 1,
scale: 1,
},
0.5: {
opacity: 1,
scale: 0.3,
},
1: {
opacity: 0,
scale: 0,
},
};
<Animatable.Text animation={zoomOut} >Zoom me out</Animatable.Text>
To make your animations globally available by referring to them by a name, you can register them with initializeRegistryWithDefinitions
. This function can also be used to replace built in animations in case you want to tweak some value.
Animatable.initializeRegistryWithDefinitions({
myFancyAnimation: {
from: { ... },
to: { ... },
}
});
The talk A Novel Approach to Declarative Animations in React Native from React Europe 2017 about this library and animations/transitions in general is available on YouTube.
MakeItRain
exampleSee Examples/MakeItRain
folder for the example project from the talk.
AnimatableExplorer
exampleSee Examples/AnimatableExplorer
folder for an example project demoing animations available out of the box and more.
Animations are heavily inspired by Animated.css.
bounce
flash
jello
pulse
rotate
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInUp
bounceInLeft
bounceInRight
bounceOut
bounceOutDown
bounceOutUp
bounceOutLeft
bounceOutRight
fadeIn
fadeInDown
fadeInDownBig
fadeInUp
fadeInUpBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutUp
fadeOutUpBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
slideInDown
slideInUp
slideInLeft
slideInRight
slideOutDown
slideOutUp
slideOutLeft
slideOutRight
zoomIn
zoomInDown
zoomInUp
zoomInLeft
zoomInRight
zoomOut
zoomOutDown
zoomOutUp
zoomOutLeft
zoomOutRight
MIT License. © Joel Arvidsson 2015
FAQs
Easy to use declarative transitions and animations for React Native
We found that react-native-animatable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.