Add inline view examples to RNTester (#24814)

Summary:
Now that inline views are supported on iOS and Android, we can add some examples to RNTester. I brought back examples from https://github.com/facebook/react-native/commit/03663491c6e68409f73d5c9bbc1a2e3c02ee0966.

I also added some new inline view examples in TextInlineView.js. Note that some examples are only supported on iOS because they rely on the inline view being able to size to content. Android's implementation requires that a width and height be specified on the inline view.

Here are the known bugs illustrated by these examples:
  - ClippedByText
    - Expected: The image/view wraps to the next line (because it is too wide) and gets clipped vertically (because it is too tall).
    - iOS bug: The image/view does not get wrapped to the next line
    - Android bug: The view gets wrapped to the next line but doesn't get clipped vertically. The image appears to be positioned too low.
  - ChangeImageSize/ChangeViewSize:
    - Expected: The "Change Image/View Width" button causes the image/view to toggle between a width of 50 and 100.
    - iOS bug: First update works. Subsequent updates don't get rendered.
    - Android bug: No updates get rendered.
  - ChangeInnerViewSize:
    - Expected: The "Change Pink View Width" button causes the pink inner view to toggle between a width of 50 and 100.
    - iOS bug: First update works but second update **CRASHES** the app.
    - Android bug: No updates get rendered.

[Internal] [Added] - Added inline view examples to RNTester
Pull Request resolved: https://github.com/facebook/react-native/pull/24814

Differential Revision: D15318070

Pulled By: cpojer

fbshipit-source-id: 35a4aaab88e477d627456eeb4208c509c42927df

RNTester/js/Shared/TextInlineView.js

@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react');
+const {Image, Text, TouchableHighlight, View} = require('react-native');
+
+function Basic() {
+  return (
+    <Text>
+      This text contains an inline blue view{' '}
+      <View style={{width: 25, height: 25, backgroundColor: 'steelblue'}} /> and
+      an inline image <Image source={require('../flux.png')} />. Neat, huh?
+    </Text>
+  );
+}
+
+function ClippedByText() {
+  return (
+    <View>
+      {/*
+       * Inline View
+       **/}
+      <Text>
+        The <Text style={{fontWeight: 'bold'}}>inline view</Text> below is
+        taller than its Text parent and should be clipped.
+      </Text>
+      <Text
+        style={{
+          overflow: 'hidden',
+          width: 150,
+          height: 75,
+          backgroundColor: 'lightgrey',
+        }}>
+        This is an inline view
+        {/* Render a red border around the steelblue rectangle to make it clear how the inline view is being clipped */}
+        <View style={{width: 50, height: 100, backgroundColor: 'red'}}>
+          <View
+            style={{
+              width: 48,
+              height: 98,
+              left: 1,
+              top: 1,
+              backgroundColor: 'steelblue',
+            }}
+          />
+        </View>
+      </Text>
+
+      {/*
+       * Inline Image
+       **/}
+      <Text style={{marginTop: 10}}>
+        The <Text style={{fontWeight: 'bold'}}>inline image</Text> below is
+        taller than its Text parent and should be clipped.
+      </Text>
+      <Text
+        style={{
+          overflow: 'hidden',
+          width: 175,
+          height: 100,
+          backgroundColor: 'lightgrey',
+        }}>
+        This is an inline image
+        <Image
+          source={{
+            uri: 'https://picsum.photos/100',
+            width: 50,
+            height: 100,
+          }}
+          style={{
+            width: 50,
+            height: 100,
+          }}
+        />
+      </Text>
+    </View>
+  );
+}
+
+type ChangeSizeState = {|
+  width: number,
+|};
+
+class ChangeImageSize extends React.Component<*, ChangeSizeState> {
+  state = {
+    width: 50,
+  };
+
+  render() {
+    return (
+      <View>
+        <TouchableHighlight
+          onPress={() => {
+            this.setState({width: this.state.width === 50 ? 100 : 50});
+          }}>
+          <Text style={{fontSize: 15}}>
+            Change Image Width (width={this.state.width})
+          </Text>
+        </TouchableHighlight>
+        <Text>
+          This is an
+          <Image
+            source={{
+              uri: 'https://picsum.photos/50',
+              width: this.state.width,
+              height: 50,
+            }}
+            style={{
+              width: this.state.width,
+              height: 50,
+            }}
+          />
+          inline image
+        </Text>
+      </View>
+    );
+  }
+}
+
+class ChangeViewSize extends React.Component<*, ChangeSizeState> {
+  state = {
+    width: 50,
+  };
+
+  render() {
+    return (
+      <View>
+        <TouchableHighlight
+          onPress={() => {
+            this.setState({width: this.state.width === 50 ? 100 : 50});
+          }}>
+          <Text style={{fontSize: 15}}>
+            Change View Width (width={this.state.width})
+          </Text>
+        </TouchableHighlight>
+        <Text>
+          This is an
+          <View
+            style={{
+              width: this.state.width,
+              height: 50,
+              backgroundColor: 'steelblue',
+            }}
+          />
+          inline view
+        </Text>
+      </View>
+    );
+  }
+}
+
+class ChangeInnerViewSize extends React.Component<*, ChangeSizeState> {
+  state = {
+    width: 50,
+  };
+
+  render() {
+    return (
+      <View>
+        <TouchableHighlight
+          onPress={() => {
+            this.setState({width: this.state.width === 50 ? 100 : 50});
+          }}>
+          {/* When updating `state.width`, it's important that the only thing that
+              changes is the width of the pink inline view. When we do this, we
+              demonstrate a bug in RN Android where the pink view doesn't get
+              rerendered and remains at its old size. If other things change
+              (e.g. we display `state.width` as text somewhere) it could circumvent
+              the bug and cause the pink view to be rerendered at its new size. */}
+          <Text style={{fontSize: 15}}>Change Pink View Width</Text>
+        </TouchableHighlight>
+        <Text>
+          This is an
+          <View style={{width: 125, height: 75, backgroundColor: 'steelblue'}}>
+            <View
+              style={{
+                width: this.state.width,
+                height: 50,
+                backgroundColor: 'pink',
+              }}
+            />
+          </View>
+          inline view
+        </Text>
+      </View>
+    );
+  }
+}
+
+module.exports = {
+  Basic,
+  ClippedByText,
+  ChangeImageSize,
+  ChangeViewSize,
+  ChangeInnerViewSize,
+};

RNTester/js/TextExample.android.js

@@ -16,6 +16,7 @@ const React = require('react');
 const {Image, StyleSheet, Text, View} = require('react-native');
 const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterPage = require('./RNTesterPage');
+const TextInlineView = require('./Shared/TextInlineView');
 const TextLegend = require('./Shared/TextLegend');
 
 class Entity extends React.Component<{|children: React.Node|}> {
@@ -506,11 +507,20 @@ class TextExample extends React.Component<{}> {
             This text will have a orange highlight on selection.
           </Text>
         </RNTesterBlock>
-        <RNTesterBlock title="Inline images">
-          <Text>
-            This text contains an inline image{' '}
-            <Image source={require('./flux.png')} />. Neat, huh?
-          </Text>
+        <RNTesterBlock title="Inline views">
+          <TextInlineView.Basic />
+        </RNTesterBlock>
+        <RNTesterBlock title="Inline image/view clipped by <Text>">
+          <TextInlineView.ClippedByText />
+        </RNTesterBlock>
+        <RNTesterBlock title="Relayout inline image">
+          <TextInlineView.ChangeImageSize />
+        </RNTesterBlock>
+        <RNTesterBlock title="Relayout inline view">
+          <TextInlineView.ChangeViewSize />
+        </RNTesterBlock>
+        <RNTesterBlock title="Relayout nested inline view">
+          <TextInlineView.ChangeInnerViewSize />
         </RNTesterBlock>
         <RNTesterBlock title="Text shadow">
           <Text

RNTester/js/TextExample.ios.js

@@ -19,8 +19,21 @@ const {
   TextInput,
   View,
 } = require('react-native');
+const TextAncestor = require('TextAncestor');
+const TextInlineView = require('./Shared/TextInlineView');
 const TextLegend = require('./Shared/TextLegend');
 
+// TODO: Is there a cleaner way to flip the TextAncestor value to false? I
+//   suspect apps won't even be able to leverage this workaround because
+//   TextAncestor is not public.
+function InlineView(props) {
+  return (
+    <TextAncestor.Provider value={false}>
+      <View {...props} />
+    </TextAncestor.Provider>
+  );
+}
+
 type TextAlignExampleRTLState = {|
   isRTL: boolean,
 |};
@@ -274,6 +287,28 @@ class TextBaseLineLayoutExample extends React.Component<*, *> {
           {marker}
         </View>
 
+        {/* iOS-only because it relies on inline views being able to size to content.
+         * Android's implementation requires that a width and height be specified
+         * on the inline view. */}
+        <Text style={subtitleStyle}>{'Interleaving <View> and <Text>:'}</Text>
+        <View style={{flexDirection: 'row', alignItems: 'baseline'}}>
+          {marker}
+          <Text selectable={true}>
+            Some text.
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'baseline',
+                backgroundColor: '#eee',
+              }}>
+              {marker}
+              <Text>Text inside View.</Text>
+              {marker}
+            </View>
+          </Text>
+          {marker}
+        </View>
+
         <Text style={subtitleStyle}>{'<TextInput/>:'}</Text>
         <View style={{flexDirection: 'row', alignItems: 'baseline'}}>
           {marker}
@@ -914,6 +949,26 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Inline views',
+    render: () => <TextInlineView.Basic />,
+  },
+  {
+    title: 'Inline image/view clipped by <Text>',
+    render: () => <TextInlineView.ClippedByText />,
+  },
+  {
+    title: 'Relayout inline image',
+    render: () => <TextInlineView.ChangeImageSize />,
+  },
+  {
+    title: 'Relayout inline view',
+    render: () => <TextInlineView.ChangeViewSize />,
+  },
+  {
+    title: 'Relayout nested inline view',
+    render: () => <TextInlineView.ChangeInnerViewSize />,
+  },
   {
     title: 'Text shadow',
     render: function() {
@@ -987,6 +1042,34 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Nested content',
+    render: function() {
+      // iOS-only because it relies on inline views being able to size to content.
+      // Android's implementation requires that a width and height be specified
+      // on the inline view.
+      return (
+        <Text>
+          This text has a view
+          <InlineView style={{borderColor: 'red', borderWidth: 1}}>
+            <Text style={{borderColor: 'blue', borderWidth: 1}}>which has</Text>
+            <Text style={{borderColor: 'green', borderWidth: 1}}>
+              another text inside.
+            </Text>
+            <Text style={{borderColor: 'yellow', borderWidth: 1}}>
+              And moreover, it has another view
+              <InlineView style={{borderColor: 'red', borderWidth: 1}}>
+                <Text style={{borderColor: 'blue', borderWidth: 1}}>
+                  with another text inside!
+                </Text>
+              </InlineView>
+            </Text>
+          </InlineView>
+          Because we need to go deeper.
+        </Text>
+      );
+    },
+  },
   {
     title: 'Dynamic Font Size Adjustment',
     render: function(): React.Element<any> {