Add RNTester example for multi-line interleaved <View> and <Text> (#28242)

Summary:
Currently, using `alignSelf: "baseline"` on a `<View>` nested in a `<Text>` fails to position the view properly. Using `alignItems: "baseline"` on the parent `<Text>` doesn't work either.

/cc shergin

### Current Result
![rn-baseline-nested-view](https://user-images.githubusercontent.com/1925840/76032574-29918080-5f08-11ea-8ee8-cf3106ef0e06.jpg)

### Expected Result
![rn-baseline-nested-text](https://user-images.githubusercontent.com/1925840/76032575-2a2a1700-5f08-11ea-9efa-4026bc824ed5.jpg)
Pull Request resolved: https://github.com/facebook/react-native/pull/28242

Reviewed By: PeteTheHeat

Differential Revision: D20308202

Pulled By: shergin

fbshipit-source-id: adb75b763db1c3e879cb90d469a80ee8262a3609
This commit is contained in:
Alec Larson
2020-03-10 00:02:21 -07:00
committed by Facebook Github Bot
parent 07c4980267
commit 37436752f5
@@ -318,6 +318,23 @@ class TextBaseLineLayoutExample extends React.Component<*, *> {
{marker}
</View>
<Text style={subtitleStyle}>
{'Multi-line interleaved <View> and <Text>:'}
</Text>
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
<Text selectable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
venenatis,{' '}
<View
style={{
backgroundColor: 'yellow',
}}>
<Text>mauris eu commodo maximus</Text>
</View>{' '}
, ante arcu vestibulum ligula, et scelerisque diam.
</Text>
</View>
<Text style={subtitleStyle}>{'<TextInput/>:'}</Text>
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
{marker}