2

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:

ezgif-2-7f7f4fba0ca6

Please help. Thanks in advance.

Encrypted
  • 628
  • 1
  • 10
  • 22

0 Answers0