[add] Text support for inline View and Image

When 'View' or 'Image' are within a 'Text', lay them out as 'inline-flex'. Fix #472
necolas · Jun 12, 2017 · dad2888 · necolas · Jun 12, 2017 · dad2888
1 parent 5e9e81e
commit dad2888
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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: {