Skip to content
Permalink
Browse files

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 0366349.

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: #24814

Differential Revision: D15318070

Pulled By: cpojer

fbshipit-source-id: 35a4aaab88e477d627456eeb4208c509c42927df
  • Loading branch information...
rigdern authored and facebook-github-bot committed May 13, 2019
1 parent 952e232 commit a2a03bc68ba062a96a6971d3791d291f49794dfd
Showing with 303 additions and 5 deletions.
  1. +205 −0 RNTester/js/Shared/TextInlineView.js
  2. +15 −5 RNTester/js/TextExample.android.js
  3. +83 −0 RNTester/js/TextExample.ios.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,
};
@@ -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
@@ -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> {

0 comments on commit a2a03bc

Please sign in to comment.
You can’t perform that action at this time.