react-native-ui-lib/src/components/sharedTransition/SourceElement.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 PropTypes from 'prop-types';
import TouchableOpacity from '../touchableOpacity';

import ShareTransitionContext from './ShareTransitionContext';

class SourceElement extends Component {
  displayName = 'IGNORE';
  static propTypes = {
    /**
     * Data to share between shared element and placeholder
     */
    data: PropTypes.object
  };

  state = {};

  onPress = () => {
    const {data} = this.props;
    const {setSharedData, setSource} = this.context;
    setSharedData(data);

    this.element.measure((_x, _y, width, height, pageX, pageY) => {
      const sourceLayout = {x: pageX, y: pageY, width, height};
      setSource(sourceLayout, this.props.children);
    });
  };

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

  render() {
    const {style, children} = this.props;
    return (
      <TouchableOpacity activeOpacity={0.9} style={style} ref={this.setRef} onPress={this.onPress}>
        {children}
      </TouchableOpacity>
    );
  }
}

SourceElement.contextType = ShareTransitionContext;
export default SourceElement;