This UI kit provides several types of animations that are built on top of the Animated API. The list of animations that can be seen in the video below include:

  • Fade-in view with delays, translations, and rotations
  • Scrolling animation
  • Loading effect
  • Blur animation
  • Text fade-in with translation

On top of that, we provide a simple high-level API that makes simple animations even simpler. Consider the animation below:

It is implemented as shown in the code snippet below.

// @flow
import {AnimatedView, simpleInterpolation, directInterpolation} from "../components/Animations";

export default class Share extends React.Component<{}> {
    render(): React.Node {
        const frontAnimations = {
            opacity: directInterpolation(),
            transform: [{ rotate: simpleInterpolation("0deg", "-15deg") }]
        const backAnimations = {
            opacity: directInterpolation(),
            transform: [{ rotate: simpleInterpolation("0deg", "15deg") }]
        return (
            <View style={styles.container}>
                    style={[styles.picture, styles.frontPicture]}
                    style={[styles.picture, styles.backPicture]}

The AnimatedView component loads the animation on mount. The component takes the following three properties.

  • animations contains a list of CSS property names and an interpolation configuration for that property. The default value is a simple fade-in effect: opacity goes up and the view that was originally translated to 20 pixels returns to original position:
animations: {
    opacity: { inputRange: [0, 1], outputRange: [0, 1] },
    transform: [ { translateY: { inputRange: [0, 1], outputRange: [20, 0] } } ]
  • delay contains the number of milliseconds to delay the start of the animation.

  • duration is the total duration of the animation.

results matching ""

    No results matching ""