React-native-reanimated: Rotation is working only on last child inside a .map loop

[WeTruck]

Hi,

Thanks for the library.

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.

[piaskowyk]

Hey @WeTruck
I found small bug in your code, here is my version:
https://gist.github.com/piaskowyk/d87e4d3486c4060392730f960f14f222

The problem was with call rotateClockwise() in functional component. This is result:

Let me know if it works for you.

[WeTruck]

@piaskowyk It really works. You saved my day. Thank you so much :)

[piaskowyk]

You welcome! Good luck :)