import React from "react";
import PropTypes from "prop-types";
import { Image } from "react-native";
import { requireNativeComponent } from "react-native";
import { ImageAttributes } from "../lib/attributes";
import { numberProp, touchableProps, responderProps } from "../lib/props";
import Shape from "./Shape";
import { meetOrSliceTypes, alignEnum } from "../lib/extract/extractViewBox";
import extractProps from "../lib/extract/extractProps";

const spacesRegExp = /\s+/;

export default class extends Shape {
    static displayName = "Image";
    static propTypes = {
        ...responderProps,
        ...touchableProps,
        x: numberProp,
        y: numberProp,
        width: numberProp.isRequired,
        height: numberProp.isRequired,
        href: Image.propTypes.source,
        preserveAspectRatio: PropTypes.string
    };

    static defaultProps = {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        preserveAspectRatio: "xMidYMid meet"
    };

    setNativeProps = (...args) => {
        this.root.setNativeProps(...args);
    };

    render() {
        let { props } = this;
        let modes = props.preserveAspectRatio.trim().split(spacesRegExp);
        let meetOrSlice = meetOrSliceTypes[modes[1]] || 0;
        let align = alignEnum[modes[0]] || "xMidYMid";

        return (
            <RNSVGImage
                ref={ele => {
                    this.root = ele;
                }}
                {...extractProps({ ...props, x: null, y: null }, this)}
                x={props.x.toString()}
                y={props.y.toString()}
                width={props.width.toString()}
                height={props.height.toString()}
                meetOrSlice={meetOrSlice}
                align={align}
                src={Image.resolveAssetSource(props.href)}
            />
        );
    }
}

const RNSVGImage = requireNativeComponent("RNSVGImage", null, {
    nativeOnly: ImageAttributes
});

@@ -70,16 +70,40 @@
  %7B Image
+, requireNativeComponent
  %7D from 
@@ -129,41 +129,34 @@
 ort 
-%7B requireNativeComponent %7D
+ImageSourcePropType
  from 
-%22
+'
 reac
@@ -155,33 +155,69 @@
 om 'react-native
-%22
+/Libraries/Image/ImageSourcePropType'
 ;%0Aimport %7B Image
@@ -818,24 +818,21 @@
 mage
-.propTypes.sourc
+SourcePropTyp
 e,%0A 

Update image prop type to ImageSourcePropType