How to make shaking image animation in React Native?

Question

I want to make a shaking image animation in React Native when i press a TouchableOpacity.

so far i have make an animation image with this code bellow:

const backgroundImage = require('./components/images/baby-sleep.jpg')

class App extends Component {

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

    handleAnimation = () => {
        Animated.timing(this.animatedValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.ease
        }).start()

    }

This is the code where i call handleAnimation() in TouchableOpacity:

<TouchableOpacity onPress={this.handleAnimation}>
   <Text style={{fontSize: 24, fontWeight: 'bold'}}>Play</Text>
</TouchableOpacity>

and this the code where i make animated image:

<Animated.Image
    source={backgroundImage}
    resizeMode='contain'
    style={{

    transform: [
        {
            translateX: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 120]
            })
        },
        {
            translateY: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 230]
            })
        },
        {
            scaleX: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [1, 15]
            })
        },
        {
            scaleY: this.animatedValue.interpolate({
            inputRange: [0, 9],
            outputRange: [1, 150.5]
            })
        }
    ]
    }}
/>

that code has make an animation when i press the TouchableOpacity, but now i'm really not sure how to make the image be shaking animation when i press the TouchableOpacity

Answer 1

You are actually pretty close. I will provide a full example below for a single wiggle rotation and then you can just add additional animations according your requirements:

const backgroundImage = require('./components/images/baby-sleep.jpg')

class App extends Component {

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

  handleAnimation = () => {
    // A loop is needed for continuous animation
    Animated.loop(
      // Animation consists of a sequence of steps
      Animated.sequence([
        // start rotation in one direction (only half the time is needed)
        Animated.timing(this.animatedValue, {toValue: 1.0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
        // rotate in other direction, to minimum value (= twice the duration of above)
        Animated.timing(this.animatedValue, {toValue: -1.0, duration: 300, easing: Easing.linear, useNativeDriver: true}),
        // return to begin position
        Animated.timing(this.animatedValue, {toValue: 0.0, duration: 150, easing: Easing.linear, useNativeDriver: true})
      ])
    ).start(); 
  }
}

And then to add this rotation to the Image component:

<Animated.Image
  source={backgroundImage}
  resizeMode='contain'
  style={{
    transform: [{
      rotate: this.animatedValue.interpolate({
        inputRange: [-1, 1],
        outputRange: ['-0.1rad', '0.1rad']
      })
    }]
  }}
/>