I'm using this library: https://github.com/software-mansion/react-native-reanimated
I want rotation on every elements after touching them. I've created it inside a .map loop. But it's working only for the last element. I want the same effect on all elements individually.
Here is my code:
import React, {Component} from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
withTiming,
} from 'react-native-reanimated';
function RotationAnimation(props) {
var rotationValue = 0;
var rotation = useSharedValue(rotationValue);
var animatedStyle = useAnimatedStyle(() => {
return {
transform: [{rotateZ: `${rotation.value}deg`}],
};
});
rotateClockwise = rv => {
var newRotationValue = parseInt(rv) * 1 + 90;
rotation.value = withTiming(newRotationValue, {duration: 100});
rotationValue = newRotationValue;
};
return (
<TouchableOpacity onPress={() => this.rotateClockwise(rotationValue)}>
<Animated.View
style={[
{
height: 100,
width: 100,
backgroundColor: 'purple',
borderColor: '#fff',
borderWidth: 1,
},
animatedStyle,
]}>
<Text
style={{
color: '#fff',
}}>
Code
</Text>
</Animated.View>
</TouchableOpacity>
);
}
export default class Index extends Component {
constructor(props) {
super(props);
}
renderView() {
var count = 6;
return [...Array(count)].map((options, key) => {
return <RotationAnimation key={key} />;
});
}
render() {
return (
<View>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{this.renderView()}
</View>
</View>
);
}
}
Here is the snack: https://snack.expo.io/@expo_test_tan/ff5ce2
NB: But it's giving error. Which is working properly in avd or real phone.
Here is the problem demo:
Please help. Thanks in advance.