diff --git a/RNTester/js/Shared/TextInlineView.js b/RNTester/js/Shared/TextInlineView.js
new file mode 100644
index 00000000000000..9cb8e13aded1ff
--- /dev/null
+++ b/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 (
+
+ This text contains an inline blue view{' '}
+ and
+ an inline image . Neat, huh?
+
+ );
+}
+
+function ClippedByText() {
+ return (
+
+ {/*
+ * Inline View
+ **/}
+
+ The inline view below is
+ taller than its Text parent and should be clipped.
+
+
+ This is an inline view
+ {/* Render a red border around the steelblue rectangle to make it clear how the inline view is being clipped */}
+
+
+
+
+
+ {/*
+ * Inline Image
+ **/}
+
+ The inline image below is
+ taller than its Text parent and should be clipped.
+
+
+ This is an inline image
+
+
+
+ );
+}
+
+type ChangeSizeState = {|
+ width: number,
+|};
+
+class ChangeImageSize extends React.Component<*, ChangeSizeState> {
+ state = {
+ width: 50,
+ };
+
+ render() {
+ return (
+
+ {
+ this.setState({width: this.state.width === 50 ? 100 : 50});
+ }}>
+
+ Change Image Width (width={this.state.width})
+
+
+
+ This is an
+
+ inline image
+
+
+ );
+ }
+}
+
+class ChangeViewSize extends React.Component<*, ChangeSizeState> {
+ state = {
+ width: 50,
+ };
+
+ render() {
+ return (
+
+ {
+ this.setState({width: this.state.width === 50 ? 100 : 50});
+ }}>
+
+ Change View Width (width={this.state.width})
+
+
+
+ This is an
+
+ inline view
+
+
+ );
+ }
+}
+
+class ChangeInnerViewSize extends React.Component<*, ChangeSizeState> {
+ state = {
+ width: 50,
+ };
+
+ render() {
+ return (
+
+ {
+ 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. */}
+ Change Pink View Width
+
+
+ This is an
+
+
+
+ inline view
+
+
+ );
+ }
+}
+
+module.exports = {
+ Basic,
+ ClippedByText,
+ ChangeImageSize,
+ ChangeViewSize,
+ ChangeInnerViewSize,
+};
diff --git a/RNTester/js/TextExample.android.js b/RNTester/js/TextExample.android.js
index 82d77d3427217e..efc53aa8d4a54b 100644
--- a/RNTester/js/TextExample.android.js
+++ b/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.
-
-
- This text contains an inline image{' '}
- . Neat, huh?
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
type TextAlignExampleRTLState = {|
isRTL: boolean,
|};
@@ -274,6 +287,28 @@ class TextBaseLineLayoutExample extends React.Component<*, *> {
{marker}
+ {/* 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. */}
+ {'Interleaving and :'}
+
+ {marker}
+
+ Some text.
+
+ {marker}
+ Text inside View.
+ {marker}
+
+
+ {marker}
+
+
{':'}
{marker}
@@ -914,6 +949,26 @@ exports.examples = [
);
},
},
+ {
+ title: 'Inline views',
+ render: () => ,
+ },
+ {
+ title: 'Inline image/view clipped by ',
+ render: () => ,
+ },
+ {
+ title: 'Relayout inline image',
+ render: () => ,
+ },
+ {
+ title: 'Relayout inline view',
+ render: () => ,
+ },
+ {
+ title: 'Relayout nested inline view',
+ render: () => ,
+ },
{
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 (
+
+ This text has a view
+
+ which has
+
+ another text inside.
+
+
+ And moreover, it has another view
+
+
+ with another text inside!
+
+
+
+
+ Because we need to go deeper.
+
+ );
+ },
+ },
{
title: 'Dynamic Font Size Adjustment',
render: function(): React.Element {