How to add shake animation to a view (react-native)?

Question

I want to shake the below View when my password is wrong. for example:

it should be translateX from place 10, to place 20 for 4 time and 1 second. then should be stopped in place 10.

place 10 (I mean the X position of View)

startShake = () => {
   Animated.loop(
       Animated.sequence([
         Animated.timing(this.animatedValue, {toValue: 1, duration: 150, easing: Easing.linear, useNativeDriver: true}),
         Animated.timing(this.animatedValue, {toValue: -1, duration: 300, easing: Easing.linear, useNativeDriver: true}),
         Animated.timing(this.animatedValue, {toValue: 0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
       ])
   ).start();
}

<Animated.View style={{transform: [{
    translateX: this.animatedValue.interpolate({
        inputRange: [0, 0],
        outputRange: [0, 0]
     })
  }]
}}>

</Animated.View>

Answer 1

Thank you for all answers.

I just solved editing my code with the following code

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

 startShake = () => {
    Animated.sequence([
      Animated.timing(this.shakeAnimation, { toValue: 10, duration: 100, useNativeDriver: true }),
      Animated.timing(this.shakeAnimation, { toValue: -10, duration: 100, useNativeDriver: true }),
      Animated.timing(this.shakeAnimation, { toValue: 10, duration: 100, useNativeDriver: true }),
      Animated.timing(this.shakeAnimation, { toValue: 0, duration: 100, useNativeDriver: true })
    ]).start();
 }

 <Animated.View style={{ transform: [{translateX: this.shakeAnimation}] }}>  

 </Animated.View>

Answer 2

Here is the shake animation for Image component in react native, you can check it-

const bgImage = require('./components/images/ex.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(); 
   }
 }

To add this Animation to Image Component-

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

Answer 3

There is a library : react-native-animitable

You can do wonders using this library and is really very easy to use with least codes.

Answer 4

You can do this without loop.

startShake = () => {
    this.animatedValue.setValue(0);
    Animated.timing(this.animatedValue,
        {
            toValue: 1, 
            duration: 150,
            easing: Easing.linear,
            useNativeDriver: true
        }
    ).start()
}

<Animated.View style={{transform: [{
    translateX: this.animatedValue.interpolate({
        inputRange: [0, 0.25, 0.50, 0.75, 1],
        outputRange: [10, 20, 10, 20, 10]
     })
  }]
}}>

</Animated.View>

Answer 5

It might some help you to get your required animation

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(); 
  }
}

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