diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap index b6080033f..ed81ec04a 100644 --- a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap +++ b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap @@ -48,6 +48,7 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit .rn-borderLeftWidth-gxnn5r{border-left-width:0px} .rn-boxSizing-deolkf{box-sizing:border-box} .rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex} +.rn-display-xoduu5{display:-webkit-box;display:-moz-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex} .rn-flexShrink-1qe8dj5{-webkit-flex-shrink:0;flex-shrink:0} .rn-flexShrink-1wbh5a2{-webkit-flex-shrink:1;flex-shrink:1} .rn-flexBasis-1mlwlqe{-webkit-flex-basis:auto;flex-basis:auto} diff --git a/src/components/Image/index.js b/src/components/Image/index.js index 06532981c..5fba4d899 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.js @@ -14,7 +14,7 @@ import StyleSheet from '../../apis/StyleSheet'; import StyleSheetPropType from '../../propTypes/StyleSheetPropType'; import View from '../View'; import ViewPropTypes from '../View/ViewPropTypes'; -import { any, func, number, oneOf, oneOfType, shape, string } from 'prop-types'; +import { any, bool, func, number, oneOf, oneOfType, shape, string } from 'prop-types'; import React, { Component } from 'react'; const emptyObject = {}; @@ -63,6 +63,10 @@ class Image extends Component { static displayName = 'Image'; + static contextTypes = { + isInAParentText: bool + }; + static propTypes = { ...ViewPropTypes, children: any, @@ -167,6 +171,7 @@ class Image extends Component { imageSizeStyle, originalStyle, resizeModeStyles[finalResizeMode], + this.context.isInAParentText && styles.inline, backgroundImage && { backgroundImage } ]); // View doesn't support 'resizeMode' as a style @@ -276,6 +281,9 @@ const styles = StyleSheet.create({ backgroundSize: 'cover', zIndex: 0 }, + inline: { + display: 'inline-flex' + }, img: { height: '100%', opacity: 0, diff --git a/src/components/View/index.js b/src/components/View/index.js index 95fb0e60a..f3301ef77 100644 --- a/src/components/View/index.js +++ b/src/components/View/index.js @@ -27,16 +27,17 @@ const calculateHitSlopStyle = hitSlop => { class View extends Component { static displayName = 'View'; - static propTypes = ViewPropTypes; - static childContextTypes = { isInAButtonView: bool }; static contextTypes = { - isInAButtonView: bool + isInAButtonView: bool, + isInAParentText: bool }; + static propTypes = ViewPropTypes; + getChildContext() { const isInAButtonView = AccessibilityUtil.propsToAriaRole(this.props) === 'button' || this.context.isInAButtonView; @@ -57,9 +58,9 @@ class View extends Component { ...otherProps } = this.props; - const { isInAButtonView } = this.context; + const { isInAButtonView, isInAParentText } = this.context; - otherProps.style = [styles.initial, style]; + otherProps.style = [styles.initial, isInAParentText && styles.inline, style]; if (hitSlop) { const hitSlopStyle = calculateHitSlopStyle(hitSlop); @@ -91,6 +92,9 @@ const styles = StyleSheet.create({ minHeight: 0, minWidth: 0 }, + inline: { + display: 'inline-flex' + }, // this zIndex ordering positions the hitSlop above the View but behind // its children hasHitSlop: {