Fix infinite loop in mappers

[mstach60161]

Summary

In some cases when mappers trigger event and event trigger mapper, we can end up with infinite loop. To prevent it, I added if statement that checks if we are already running mappers.

• fixes [V3.1.0] Maximum call stack size exceeded (native stack depth) #4405

Test plan

• Checked with example from this PR: Break infinite queueMicrotask loop when updates are triggered in mapper-run phase #4358
• and code that caused that bug:

import React from 'react';

import Animated, {
  useAnimatedRef,
  withTiming,
  useAnimatedReaction,
  scrollTo,
  useSharedValue,
  useScrollViewOffset,
  useDerivedValue,
} from 'react-native-reanimated';
import { Button, StyleSheet, Text, View } from 'react-native';

export default function ScrollViewOffsetCallScrollToExample() {
  const aref = useAnimatedRef<Animated.ScrollView>();
  const sharedValue = useSharedValue(0);
  const scrollHandler = useScrollViewOffset(aref);

  const onChangeScrollValue = () => {
    sharedValue.value = Math.random() * 5000;
  };

  const onAnimatedChangeScrollValue = () => {
    sharedValue.value = withTiming(Math.random() * 5000);
  };

  useAnimatedReaction(
    () => {
      return sharedValue.value;
    },
    (value) => {
      scrollTo(aref, 0, value, false);
    }
  );

  useDerivedValue(() => {
    console.log(sharedValue.value)
    return {};
  });

  return (
    <>
      <View style={styles.positionView}>
        <Text>Test</Text>
        <Button
          title="Scroll without animation"
          onPress={onChangeScrollValue}
        />
        <Button
          title="Scroll with animation"
          onPress={onAnimatedChangeScrollValue}
        />
      </View>
      <View style={styles.divider} />
      <View style={styles.scrollsContainer}>
        <Animated.ScrollView
          ref={aref}
          style={styles.scrollView}>
          {[...Array(100)].map((_, i) => (
            <Text key={i} style={styles.text}>
              {i}
            </Text>
          ))}
        </Animated.ScrollView>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  positionView: {
    margin: 20,
    alignItems: 'center',
  },
  scrollsContainer: {
    flexDirection: 'row',
  },
  scrollView: {
    flex: 1,
    width: '100%',
  },
  text: {
    fontSize: 50,
    textAlign: 'center',
  },
  divider: {
    backgroundColor: 'black',
    height: 1,
  },
});