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({ sharedList, length }) {
  const last = useSharedValue(sharedList.value[length - 1]);

  useAnimatedReaction(
    () => {
      console.log('LIST', sharedList.value);
      return sharedList.value[length - 1];
    },
    (what) => {
      console.warn('WHAT', what);
      last.value = what;
    }
  );

  const stylez = useAnimatedStyle(() => {
    return { width: last.value ? withTiming(10) : withTiming(20) };
  });

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

export default function Main(props) {
  const [list, setList] = useState([1, 2]);
  const sharedList = useSharedValue(list, false);

  useEffect(() => {
    sharedList.value = list;
  }, [list]);

  return (
    <View
      style={{
        flex: 1,
        padding: 50,
        flexDirection: 'column',
      }}>
      <Text>{list.join(',')}</Text>
      <Inner sharedList={sharedList} length={list.length} />
      <Button
        title="add"
        onPress={() => {
          setList([...list, list.length + 1]);
        }}
      />
      <Button
        title="remove"
        onPress={() => {
          setList(list.slice(0, -1));
        }}
      />
    </View>
  );
}