import {Animated, Easing} from 'react-native';

state = {
    animatedManicule: new Animated.Value(0);
}

Animated.timing(this.state.animatedManicule, {
    toValue: 1,
    duration: 1000,
    delay: 0,
    easing: Easing.bezier(0,.53,.47,1),
}).start();

animateManicule() {
    Animated.loop(
        Animated.sequence([
            Animated.timing(this.state.moveManicule, {
                toValue: 1,
                duration: 1000,
                delay: 0,
                easing: Easing.bezier(0,.53,.47,1),
            }),
            Animated.timing(this.state.moveManicule, {
                toValue: 0,
                duration: 1000,
                delay: 0,
                easing: Easing.bezier(0,.53,.47,1),
            }),
        ])
    ).start();
}

render() {
    return(
        <Animated.View>
            <Image
                source={WhiteManicule}
            />
        </Animated.View>
    )
}

render() {
    return(
        <Animated.View
            style={{
                top: this.state.moveManicule.interpolate({
                    inputRange: [0, 1],
                    outputRange: [100 , 90]
                })
            }}
        >
            <Image
                source={WhiteManicule}
            />
        </Animated.View>
    )
}

componentDidMount() {
    this.animateManicule();
}

import { Animated, Easing } from 'react-native';

import LottieView from 'lottie-react-native';

state = {
    progress: new Animated.Value(0);
}

animateWithLottie() {
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 5000,
      easing: Easing.linear,
    }).start();
}

render() {
    return (
        <LottieView 
            source={require('../path/to/animation.json')} 
            progress={this.state.progress} 
        />
    );
}

componentDidMount() {
    this.animateWithLottie();
}

node Utils/APNGCompiler.js -i ./src/Assets/Animations/Pages/raw/ -o ./src/Assets/Animations/Pages/compiled/"

import ApngPlayer from "./ApngPlayer";

import chevalier from "./Assets/Animations/Pages/compiled/CHEVALIER_loop.png";

render() {
    return(
        <ApngPlayer
            playlist={[chevalier]}
        />
    )
}