app.js

/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Animated,
  Text,
  Image,
  Dimensions,
  TouchableNativeFeedback,
  SafeAreaView,
} from 'react-native';

const IMAGES = [
  {id: 1, url: require('./assets/images/one.png')},
  {id: 2, url: require('./assets/images/two.png')},
  {id: 3, url: require('./assets/images/three.png')},
  {id: 4, url: require('./assets/images/four.png')},
];

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

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

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

  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([
        Animated.timing(positions.x, {
          toValue: 0,
          duration: 1000,
        }),
        Animated.timing(positions.y, {
          toValue: 0,
          duration: 1000,
        }),
        Animated.timing(dimensions.x, {
          toValue: SCREEN_WIDTH,
          duration: 1000,
        }),
        Animated.timing(dimensions.y, {
          toValue: (SCREEN_HEIGHT * 2) / 3,
          duration: 1000,
        }),
      ]).start(() => {
        console.log('3 transformation ended');
      });
    }
    // });
  }, [positions.x, dimensions.x]);

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

  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>
        {IMAGES.map((image, index) => (
          <TouchableNativeFeedback
            key={image.id}
===================================================
            onPress={() => openImage(index)}>
            <View style={styles.imageView}>
              <Image
                ref={image => (allImages[index] = image)}
                source={image.url}
                style={{
                  flex: 1,
                  height: null,
                  width: null,
                  borderRadius: 20,
                  resizeMode: 'cover',
                }}
              />
            </View>
          </TouchableNativeFeedback>
        ))}
      </ScrollView>
      <View
        style={[
          StyleSheet.absoluteFill,
          {backgroundColor: 'rgba(240,240,240,0.7)'},
        ]}
        pointerEvents={state.activeImage ? 'auto' : 'none'}>
        <View style={{flex: 2}} ref={view => (viewRef = view)}>
          <Animated.Image
            source={state.activeImage ? state.activeImage.url : null}
            style={[
              {
                width: null,
                height: null,
                top: 0,
                left: 0,
                // borderRadius: 20,
                resizeMode: 'cover',
              },
===================================================
              {...animatedImageStyle.current},
            ]}
          />
        </View>
        <View style={{flex: 1}}></View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageView: {
    height: SCREEN_HEIGHT - 100,
    width: SCREEN_WIDTH,
    padding: 10,
  },
});

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}
...