How to create a shaking/floating animation to an image (react native) - react-native

Question

I want to create a shaking/floating (call it what you want) animation to an image.
Basically the image will float or wiggle left to right and at the same time up and down.
The animation will be triggered automatically.
This is the component I have. Image is a round ball so nothing fancy.
I tried putting values in inputRange and outputRange but nothing happened. Probably because it doesn't trigger the animation (?).
New to react native, not even sure if below is a good start to my animationgoal.
import React, { Component } from "react";
import { Animated } from "react-native";
import Images from "./assets/Images";
export default class Round extends Component {
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(0);
}
render() {
let float = this.animatedValue.interpolate({
inputRange: [],
outputRange: [],
});
return (
<Animated.Image
style={{
position: "absolute",
left: x,
top: y,
width: width,
height: height,
transform: { translate: float },
}}
resizeMode="stretch"
source={Images.round}
/>
);
}
}
I used the react-native-animatable library to solve my problem

Answer 1

I have created something similar to iPhone delete app screen, where all icons wiggle.
You can decrease duration field to increase the speed of wiggle.
const spinValue = new Animated.Value(0);
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(spinValue, {
toValue: 1,
duration: 30,
useNativeDriver: true,
}),
Animated.timing(spinValue, {
toValue: 2,
duration: 40,
useNativeDriver: true,
}),
]),
).start();
}, [spinValue]);
const spin = spinValue.interpolate({
inputRange: [0, 1, 2],
outputRange: ['0deg', '2deg', '-2deg'],
});
**
JSX **
<
Animated.View
style = {
[
styles.container,
styles.deleteContainer,
{
transform: [{
rotate: spin
}],
},
]
} >
<
Image
style = {
[styles.thumb, styles.deleteContainer]
}
source = {
{
uri: item.thumbnailUrl
}
}
/> <
/Animated.View>
deleteContainer: {
opacity: 0.85,
borderRadius: 5,
borderColor: 'red',
borderWidth: 1.4,
},