rea-2-sync-state-repro.js

import Animated, {
  useSharedValue,
  useAnimatedReaction,
  withTiming,
  useAnimatedStyle,
} from 'react-native-reanimated';
import { View, Button, Text } from 'react-native';
import React, { useLayoutEffect, useEffect, useState } from 'react';

function Inner({ sharedCounter, counter }) {
  useAnimatedReaction(
    () => {
      if (sharedCounter.value !== counter) {
        throw new Error('nooooo ' + sharedCounter.value + ' != ' + counter);
      }
      return 0;
    },
    (what) => {}
  );

  const stylez = useAnimatedStyle(() => {
    return { width: 10 };
  });

  return (
    <Animated.View style={[{ height: 20, backgroundColor: 'red' }, stylez]} />
  );
}

export default function Main(props) {
  const [counter, setCounter] = useState(1);
  const sharedCounter = useSharedValue(counter, false);

  useLayoutEffect(() => {
    sharedCounter.value = counter;
  }, [counter]);

  // useEffect(() => {
  //   sharedCounter.value = counter;
  // }, [counter]);

  return (
    <View
      style={{
        flex: 1,
        padding: 50,
        flexDirection: 'column',
      }}>
      <Text>{counter}</Text>
      <Inner sharedCounter={sharedCounter} counter={counter} />
      <Button
        title="inc"
        onPress={() => {
          setCounter(counter + 1);
        }}
      />
      <Button
        title="dec"
        onPress={() => {
          setCounter(counter - 1);
        }}
      />
    </View>
  );
}