renderAnimationClones() {
    const { source, target } = this.props;
    const { sourceLayout, targetLayout, animValue } = this.state;
    const sourceStyle = StyleSheet.flatten([source.props.style]);
    const targetStyle = StyleSheet.flatten([target.props.style]);
    const transition = this.getTransition();
    let nativeContentType =
      (transition.defaultProps
        ? transition.defaultProps.nativeContentType
        : undefined) || "children";

    // When a child is being animated, then disable native optimisations
    // as these use a snapshot which also includes that child.
    // Instead, that child should not be visible in this clone,
    // otherwise it would be drawn twice.
    if (
      target.props.useNativeClone &&
      nativeContentType === "snapshot" &&
      source.props.mmContext.administration.isAnimatingChildOf(source)
    ) {
      if (this.isDebug) {
        // eslint-disable-next-line
        console.debug(
          `[MagicMove] Disabling native image snapshot for ${
            source.debugName
          }, because its child is also being animated`
        );
      }
      nativeContentType = "children";
    }

    const from = {
      isTarget: false,
      component: source,
      width: sourceLayout.width,
      height: sourceLayout.height,
      imageWidth: sourceLayout.imageWidth,
      imageHeight: sourceLayout.imageHeight,
      blurRadius: 0,
      start: {
        x: sourceLayout.x,
        y: sourceLayout.y,
        scaleX: sourceLayout.scaleX,
        scaleY: sourceLayout.scaleY,
        opacity: sourceStyle.opacity !== undefined ? sourceStyle.opacity : 1
      },
      end: {
        x: targetLayout.x - (sourceLayout.width - targetLayout.width) / 2,
        y: targetLayout.y - (sourceLayout.height - targetLayout.height) / 2,
        scaleX:
          ((targetLayout.width * targetLayout.scaleX) /
            (sourceLayout.width * sourceLayout.scaleX)) *
          sourceLayout.scaleX,
        scaleY:
          ((targetLayout.height * targetLayout.scaleY) /
            (sourceLayout.height * sourceLayout.scaleY)) *
          sourceLayout.scaleY,
        opacity: targetStyle.opacity !== undefined ? targetStyle.opacity : 1
      },
      props: {
        ...source.props
      },
      style: {
        ...sourceStyle,
        position: "absolute",
        width: sourceLayout.width,
        height: sourceLayout.height,
        left: 0,
        top: 0,
        transform: [
          { translateX: sourceLayout.x },
          { translateY: sourceLayout.y },
          { scaleX: sourceLayout.scaleX },
          { scaleY: sourceLayout.scaleY }
        ],
        margin: 0,
        marginTop: 0,
        marginBottom: 0,
        marginLeft: 0,
        marginRight: 0
      },
      contentStyle: undefined,
      nativeContentType
    };

    const to = {
      isTarget: true,
      component: target,
      width: targetLayout.width,
      height: targetLayout.height,
      imageWidth: targetLayout.imageWidth,
      imageHeight: targetLayout.imageHeight,
      blurRadius: 0,
      start: {
        x: sourceLayout.x - (targetLayout.width - sourceLayout.width) / 2,
        y: sourceLayout.y - (targetLayout.height - sourceLayout.height) / 2,
        scaleX:
          ((sourceLayout.width * sourceLayout.scaleX) /
            (targetLayout.width * targetLayout.scaleX)) *
          targetLayout.scaleX,
        scaleY:
          ((sourceLayout.height * sourceLayout.scaleY) /
            (targetLayout.height * targetLayout.scaleY)) *
          targetLayout.scaleY,
        opacity: sourceStyle.opacity !== undefined ? sourceStyle.opacity : 1
      },
      end: {
        x: targetLayout.x,
        y: targetLayout.y,
        scaleX: targetLayout.scaleX,
        scaleY: targetLayout.scaleY,
        opacity: targetStyle.opacity !== undefined ? targetStyle.opacity : 1
      },
      props: {
        ...target.props
      },
      style: {
        ...targetStyle,
        position: "absolute",
        width: targetLayout.width,
        height: targetLayout.height,
        left: 0,
        top: 0,
        transform: [
          { translateX: targetLayout.x },
          { translateY: targetLayout.y },
          { scaleX: targetLayout.scaleX },
          { scaleY: targetLayout.scaleY }
        ],
        margin: 0,
        marginTop: 0,
        marginBottom: 0,
        marginLeft: 0,
        marginRight: 0
      },
      contentStyle: undefined,
      nativeContentType
    };
    return transition({
      from,
      to,
      animValue,
      render: this._renderAnimationClone,
      interpolate: this.interpolate
    });
  }
Renders the animated clones using the configured
transition function.