@farazzshaikh/react-native-simple-animations v1.0.4

Simple Animations

Simple Animations is a simple abstraction of the React Native Animated API built for iOS.

Installation

$ npm i @farazzshaikh/react-native-simple-animations --save

iOS

$ cd ios
$ pod install
$ cd ..

Usage

Import

import { RNSimpleAnimations } from '@farazzshaikh/react-native-simple-animations';

Initialize

Create new animation instance.

const animation = new RNSimpleAnimations(
    keyframes,
    delay,
    useNativeDriver
)

Assign Animation

Assign interpolated value to style property.

 <Animated.View
    style={{
        transform: [
            { translateX: animation.getValue() }
        ]
    }}
>

Play Animation

animation.start()

Example

Simple example of an animation that drives scale continuously. Example app in ./examples/src.

import React, { Component } from 'react';
import {
    Button,
    Animated,
    Easing
} from 'react-native';
import { RNSimpleAnimations } from '@farazzshaikh/react-native-simple-animations';

export default class Example extends Component {
    constructor(props) {
        super(props)
        // instantiation
        this.animation = new RNSimpleAnimations([1, 1.5, 1], 1000, true) 
          .setEasing(Easing.ease)
          .makeContinous()
    }
    render() {
        return (
            <>
                <Animated.View style={{
                    transform: [
                        scale: this.animation.getValue() // Assignment
                    ]
                }}>
                </Animated.View>
                <Button 
                    title={'Trigger'}
                    onPress={() => {
                        this.animation.start() // Execution
                    }}
                />
            </>
        )
    }
}

Documentation

Simple Animations is currently available with the following options:

constructor

Initialize Animation Instance.

new RNSimpleAnimations()

.getValue()

Get interpolated value. Must be assigned to style property.

animation.getValue()

.makeToggleable()

Make animation toggleable. i.e. play animation in reverse after playing it with play().

animation.makeToggleable()

.makeContinous()

Make Animation continous . i.e. loop animation continously after calling start() till stop() is called.

animation.makeContinous()

.setEasing()

Sets an easing function for animation interpolation.

animation.setEasing()

.setDelay()

Sets delay before start of an anmation cycle.

animation.setDelay()

.play()

Play animation.

animation.play()

.playBackward()

Play animation in reverse.

animation.playBackward()

.start()

Start continuous animation.

animation.start()

.stop()

Stop continuous animation that has started.

animation.stop()