forked from software-mansion/react-native-svg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Image.js
64 lines (57 loc) · 1.9 KB
/
Image.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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
});