react-native-ui-lib/src/components/sharedTransition/TargetElement.js

<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a

import React, {Component} from 'react';
import TouchableOpacity from '../touchableOpacity';

import ShareTransitionContext from './ShareTransitionContext';

class TargetElement extends Component {
  displayName = 'IGNORE';
  state = {};

  componentDidMount() {
    const {setTarget} = this.context;

    if (!this.targetLayout) {
      setTimeout(() => {
        this.element.measure((_x, _y, width, height, pageX, pageY) => {
          this.targetLayout = {x: pageX, y: pageY, width, height};
          setTarget(this.targetLayout);
        });
      });
    }
  }

  setRef = ref => {
    this.element = ref;
  };

  render() {
    const {style, children} = this.props;
    return (
      <TouchableOpacity style={[style, {opacity: 0}]} ref={this.setRef}>
        {children}
      </TouchableOpacity>
    );
  }
}

TargetElement.contextType = ShareTransitionContext;
export default TargetElement;