Skip to content

Commit

Permalink
Add inline view examples to RNTester (#24814)
Browse files Browse the repository at this point in the history 
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 @facebook-github-bot
rigdern authored and facebook-github-bot committed May 13, 2019
1 parent 952e232 commit a2a03bc
Show file tree
Hide file tree
Showing 3 changed files with 303 additions and 5 deletions.
205 changes: 205 additions & 0 deletions RNTester/js/Shared/TextInlineView.js
View file
Original file line number Diff line number Diff line change
@@ -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,
};
20 changes: 15 additions & 5 deletions RNTester/js/TextExample.android.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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|}> {
Expand Down Expand Up @@ -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
Expand Down
83 changes: 83 additions & 0 deletions RNTester/js/TextExample.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
|};
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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> {
Expand Down

0 comments on commit a2a03bc

Please sign in to comment.