diff --git a/src/components/Image/__tests__/__snapshots__/index-test.js.snap b/src/components/Image/__tests__/__snapshots__/index-test.js.snap
index 8a82dca4..644169e4 100644
--- a/src/components/Image/__tests__/__snapshots__/index-test.js.snap
+++ b/src/components/Image/__tests__/__snapshots__/index-test.js.snap
@@ -34,9 +34,9 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
+rn-textDecoration:none
+rn-zIndex:0"
onResponderGrant={[Function]}
- role="img"
style={Object {}} />
`;
@@ -77,8 +77,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
@@ -119,8 +119,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
@@ -160,8 +160,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}}>
@@ -204,15 +204,29 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={
Object {
"backgroundImage": "url(\"https://google.com/favicon.ico\")",
"height": "20px",
"width": "40px",
}
- } />
+ }>
+
+
`;
exports[`components/Image prop "defaultSource" sets "height" and "width" styles if missing 1`] = `
@@ -251,15 +265,29 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={
Object {
"backgroundImage": "url(\"https://google.com/favicon.ico\")",
"height": "10px",
"width": "20px",
}
- } />
+ }>
+
+
`;
exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = `
@@ -298,13 +326,27 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={
Object {
"backgroundImage": "url(\"https://google.com/favicon.ico\")",
}
- } />
+ }>
+
+
`;
exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = `
@@ -343,13 +385,27 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={
Object {
"backgroundImage": "url(\"https://google.com/favicon.ico\")",
}
- } />
+ }>
+
+
`;
exports[`components/Image prop "resizeMode" value "contain" 1`] = `
@@ -388,8 +444,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
@@ -429,8 +485,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
@@ -470,8 +526,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
@@ -511,8 +567,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
@@ -552,8 +608,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
@@ -593,8 +649,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
@@ -634,9 +690,9 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
+rn-textDecoration:none
+rn-zIndex:0"
data-testid="testID"
- role="img"
style={Object {}} />
`;
@@ -676,7 +732,7 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
-rn-textDecoration:none"
- role="img"
+rn-textDecoration:none
+rn-zIndex:0"
style={Object {}} />
`;
diff --git a/src/components/Image/index.js b/src/components/Image/index.js
index 2febd6a8..a35e92e3 100644
--- a/src/components/Image/index.js
+++ b/src/components/Image/index.js
@@ -139,17 +139,24 @@ class Image extends Component {
// View doesn't support 'resizeMode' as a style
delete style.resizeMode;
+ // Allows users to trigger the browser's image context menu
+ const hiddenImage = displayImage ? createDOMElement('img', {
+ src: displayImage,
+ style: [ StyleSheet.absoluteFill, styles.img ]
+ }) : null;
+
return (
+ >
+ {hiddenImage}
+ {children}
+
);
}
@@ -224,7 +231,14 @@ const styles = StyleSheet.create({
backgroundColor: 'transparent',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
- backgroundSize: 'cover'
+ backgroundSize: 'cover',
+ zIndex: 0
+ },
+ img: {
+ height: '100%',
+ opacity: 0,
+ width: '100%',
+ zIndex: -1
}
});