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/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> {