0

I want something like this

I am trying to make a animation screen something like this picture but I am not done properly. b I want like this picture which I uploaded. I am not good in animation please help me to improve my code. I am stuck in animation.

this is what I tried.

import React, { Component } from 'react'
import { View, Image, Animated, Easing } from 'react-native'

const backgroundImage = require("../../../assets/icons/post.jpeg")
export default class Splash extends Component {
constructor(props) {
    super(props)
    this.state = { spinAnim: new Animated.Value(0) }
}

componentDidMount() {
    this.handleAnimation()
}

handleAnimation = () => {
    console.log("rree")
    Animated.timing(
        this.state.spinAnim,
        {
            toValue: 1,
            duration: 500,
            easing: Easing.linear,
            useNativeDriver: true
        }
    ).start();
}

render() {
    const spin = this.state.spinAnim.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
    });
    return (
        <View>
            <View style={{ flex: 1 }}>
                <Animated.Image
                    source={backgroundImage}
                    resizeMode='cover'
                    style={{
                        position: 'absolute',
                        left: 40,
                        top: 100,
                        height: 100,
                        width: 100,
                        transform: [
                            { rotate: spin },
                        ]
                    }}
                />
            </View>
        </View>
    )
}
}
Vrushi Patel
  • 2,361
  • 1
  • 17
  • 30
shammi
  • 1,301
  • 1
  • 10
  • 25

2 Answers2

2

I think you should use react-native-animatable library. In this library you have lot's of animations and transitions which you want to use. it is very easy to usable

import * as Animatable from 'react-native-animatable';

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

and in this library you have more props to use like onAnimationEnd when animation is ended you can call a function if you want.

Gagan Dhiman
  • 48
  • 5
0

If you want to use a package you can use Lottie it is also supported by expo.

https://www.npmjs.com/package/lottie-react-native

it creates very good looking React Native Animations with After Effects. Search for it on youtube I saw a very clean tutorial there. Best of luck!

yesIamFaded
  • 1,970
  • 2
  • 20
  • 45