app.js

const App = () => {
  const allImages = [];
  const positions = new Animated.ValueXY();
  const dimensions = new Animated.ValueXY();
  var viewRef = null;

  const [state, setState] = React.useState({
    activeImage: null,
  });

=============CALLED ON BUTTON CLICK =======================
  const openImage = index => {
    // we are going to store the image position, dimensions here
    allImages[index].measure((x, y, width, height, pageX, pageY) => {
      // we will store the old coords here...
      positions.setValue({
        x: pageX,
        y: pageY,
      });
      dimensions.setValue({
        x: width,
        y: height,
      });
    });

    setState({activeImage: IMAGES[index]});
  };

  var animatedImageStyle = React.useRef({});

  React.useEffect(() => {
    console.log('1 activeImage', state.activeImage);
    if (state.activeImage) {
      console.log(
        '1 animation style hook called',
        JSON.stringify(positions),
        JSON.stringify(dimensions),
      );
      animatedImageStyle.current = {
        width: dimensions.x,
        height: dimensions.y,
        top: positions.y,
        left: positions.x,
      };
    }
  }, [positions.x, dimensions.x]);

  React.useEffect(() => {
    // this is ref to our destination view
    console.log('2 activeImage', state.activeImage);
    if (state.activeImage) {
      console.log(
        '2 animation hook is being called',
        JSON.stringify(positions),
        JSON.stringify(dimensions),
      );
      // viewRef.measure((x, y, width, height, pageX, pageY) => {
      Animated.parallel([
        ...
      ]).start(() => {
        console.log('3 transformation ended');
      });
    }
    // });
  }, [positions.x, dimensions.x]);

  console.log('NONE root', animatedImageStyle.current);

  return (
    ...
    //returns with openImage handler use
    ...
  );
};

export default App;

// OUTPUT

NONE root {}
 LOG  1 activeImage null
 LOG  2 activeImage null
 LOG  NONE root {}
 LOG  1 activeImage {"id": 2, "url": 2}
 LOG  1 animation style hook called {"x":0,"y":0} {"x":0,"y":0}
 LOG  2 activeImage {"id": 2, "url": 2}
 LOG  2 animation hook is being called {"x":0,"y":0} {"x":0,"y":0}
 LOG  3 transformation ended

// EXPECTED

...
 LOG  1 animation style hook called {"x":123123,"y":123123} {"x":123123,"y":123123}
 LOG  2 activeImage {"id": 2, "url": 2}
 LOG  2 animation hook is being called {"x":123123,"y":123123} {"x":123123,"y":123123}
...