Fix inline-flex for view inside text

Author: markusjwetzel

src/utils/rnw-compat/BaseView.js

@@ -40,12 +40,6 @@ const defaultProps = {
   styleName: null,
 };
 
-const styles = StyleSheet.create({
-  inline: {
-    display: 'inline-flex',
-  },
-});
-
 const calculateHitSlopStyle = (hitSlop) => {
   const hitStyle = {};
 
@@ -97,17 +91,16 @@ class BaseView extends Component {
     supportedProps.className = cx(
       // add yoga layout styles
       !pseudo && 'yv',
+      // add flex-inline if inside text
+      isInAParentText && 'yv-inline',
       // add (mostly) bootstrap styles
       className,
       // add custom styles
       customClassName,
       // add utils styles
       createUtilityClasses(styleName),
     );
-    supportedProps.style = StyleSheet.compose(
-      isInAParentText && styles.inline,
-      style,
-    );
+    supportedProps.style = StyleSheet.compose(style);
 
     if (hitSlop) {
       const hitSlopStyle = calculateHitSlopStyle(hitSlop);

styles.css

@@ -27,6 +27,17 @@
   display: flex;
 }
 
+.yv-inline:not(.collapse):not(.carousel-item):not(.dropdown-menu):not(.modal):not(.navbar):not(.navbar-toggler):not(.navbar-collapse):not(.offcanvas):not(.tab-pane),
+.yv-inline.show {
+  display: inline-flex !important;
+}
+
+.yv-inline.navbar,
+.yv-inline.navbar-toggler,
+.yv-inline.navbar-collapse {
+  display: inline-flex;
+}
+
 .yv-hit-slop {
   position: absolute;
   top: 0;