How to add shake animation to a view (react-native)? - 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']
})
}]
}}
/>

Answer 6

It can be a good solution with two axes:
import React, { useState } from "react";
import { StyleSheet, View, Animated, TouchableWithoutFeedback, Easing } from "react-native";
const Shake = () => {
const [animation] = useState(new Animated.Value(0));
const startAnimation = () => {
animation.setValue(0);
Animated.timing(animation, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true
}).start(()=>{
animation.setValue(0)
});
}
const animatedStyles = {
transform: [
{
translateX: animation.interpolate({
inputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
outputRange: [0, 10, -10, 10, -10, 0, 0, 0, 0, 0, 0]
})
},
{
translateY: animation.interpolate({
inputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
outputRange: [0, 0, 0, 0, 0, 0, 10, -10, 10, -10, 0]
})
}
]
}
return <View style={styles.container}>
<TouchableWithoutFeedback onPress={startAnimation}>
<Animated.View style={[styles.box, animatedStyles]} />
</TouchableWithoutFeedback>
</View>
}
const styles = StyleSheet.create({
container: {
flex: 1,
height: 600,
alignItems: "center",
justifyContent: "center",
},
box: {
backgroundColor: "tomato",
width:150,
height:150
}
});
export default Shake

Answer 7

// #flow
import React, { useCallback, useEffect, useRef } from 'react'
import { Image, Animated } from 'react-native'
// Constants
const DEFAULT_STEP_TIME = 1000
interface Props {
source: string | number;
intensity?: number;
stepTime?: number;
iterations?: number;
containerStyle?: any;
style?: any;
}
const ShakingIcon = ({
source,
intensity = 2,
stepTime,
iterations = 2,
containerStyle,
style,
}: Props) => {
const interval = useRef(null)
const animation = useRef(new Animated.Value(0))
const shakeAnimation = useCallback(() => {
Animated.loop(
Animated.sequence([
Animated.timing(animation.current, {
toValue: -intensity,
duration: 50,
useNativeDriver: true,
}),
Animated.timing(animation.current, {
toValue: intensity,
duration: 50,
useNativeDriver: true,
}),
Animated.timing(animation.current, {
toValue: 0,
duration: 50,
useNativeDriver: true,
}),
]),
{ iterations },
).start()
}, [])
const runAnimation = useCallback(async () => {
interval.current = setInterval(
() => shakeAnimation(),
stepTime || DEFAULT_STEP_TIME,
)
}, [])
useEffect(() => {
runAnimation()
return () => clearInterval(interval.current)
}, [])
return (
<Animated.View
style={[
containerStyle,
{ transform: [{ translateX: animation.current }] },
]}
>
<Image source={source} style={style} />
</Animated.View>
)
}
export default ShakingIcon
based on https://snack.expo.dev/embedded/#ananthu.kanive/shake?iframeId=t099o2svbu&preview=true&platform=web&theme=light