CODEWITHSUNDEEP
javascriptreactjsreact-native
Adarsh Sreeram
Adarsh Sreeram

Reputation: 962

The spin animation set on the image is not working in react-native

I am trying to spin an Image it is basically to show that a coin is flipped ( coin Tossing animation ) I have applied this basic animation to the image but it is not getting animated,

The image is stationary while I tested it on emulator

this is my index.android.js file : 

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

export default class animateTest extends Component {

  constructor(props) {
      super(props);
      this.spinValue = new Animated.Value(0);
    }

    spin() {
      this.spinValue.setValue(0);
      Animated.timing(
        this.spinValue, {
          toValue: 1,
          duration: 1500,
          useNativeDriver: true,
          easing: Easing.linear
        }
      ).start();
    }

  render() {
    const spin = this.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
});

    return (
      <View style={styles.ViewStyle}>
      <Animated.Image
            style={[
              styles.coinStyle,
               {
                transform: [
                  { rotate: spin }
                ]
              }
            ]}
             source={require('./Images/Coin_Tail.png')}
            style={styles.coinStyle} />
      </View>
    );
  }
}
const styles = {
  coinStyle: {
    width: 150,
height: 150,
  },
  ViewStyle: {
    flex: 1,
    justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: 'black'
  }
};

AppRegistry.registerComponent('animateTest', () => animateTest);

Upvotes: 0

Views: 1780

Answers (1)

alpha
alpha

Reputation: 1113

You code have 2 issues:

1) In your render function, you have a duplicated style prop for your image that override the first style with transform styling. To fix it, remove the second style prop

2) Your code did not trigger the spin animation, you can add a touchable with on press event to call your spin method. For quick test, you can add 

  componentDidMount() {
    this.spin();
  }

Upvotes: 1

Related Questions