Permalink
Browse files

Demo illustrated `base-line` metric exposure

Summary:
A demo illustrated `base-line` metric exposure to layout system was added to RNTester.
And currently it shows that we don't support it at all.

https://cl.ly/1F0B0D430U3e

Reviewed By: sahrens

Differential Revision: D6957056

fbshipit-source-id: 28776300fc8e11950ac5ba1a5416f68d31d4e9fb
  • Loading branch information...
shergin authored and facebook-github-bot committed Feb 16, 2018
1 parent ad4f54f commit 7630a614e4bd56c1a3ac728e1dfafd114340f2b7
Showing with 71 additions and 1 deletion.
  1. +71 −1 RNTester/js/TextExample.ios.js
@@ -15,7 +15,7 @@ const Platform = require('Platform');
var React = require('react');
var createReactClass = require('create-react-class');
var ReactNative = require('react-native');
var {Image, Text, View, LayoutAnimation, Button} = ReactNative;
var {Image, Text, TextInput, View, LayoutAnimation, Button} = ReactNative;
type TextAlignExampleRTLState = {|
isRTL: boolean,
@@ -224,6 +224,70 @@ var AdjustingFontSize = createReactClass({
},
});
class TextBaseLineLayoutExample extends React.Component<*, *> {
render() {
var texts = [];
for (var i = 9; i >= 0; i--) {
texts.push(<Text key={i} style={{fontSize: 8 + i * 5, backgroundColor: '#eee'}}>{i}</Text>);
}
const marker = <View style={{width: 20, height: 20, backgroundColor: 'gray'}} />;
const subtitleStyle = {fontSize: 16, marginTop: 8, fontWeight: 'bold'};
return (
<View>
<Text style={subtitleStyle}>{'Nested <Text/>s:'}</Text>
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
{marker}
<Text>
{texts}
</Text>
{marker}
</View>
<Text style={subtitleStyle}>{'Array of <Text/>s in <View>:'}</Text>
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
{marker}
{texts}
{marker}
</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}
<TextInput style={{margin: 0, padding: 0}}>
{texts}
</TextInput>
{marker}
</View>
<Text style={subtitleStyle}>{'<TextInput multiline/>:'}</Text>
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
{marker}
<TextInput multiline={true} style={{margin: 0, padding: 0}}>
{texts}
</TextInput>
{marker}
</View>
</View>
);
}
}
exports.title = '<Text>';
exports.description = 'Base component for rendering styled text.';
exports.displayName = 'TextExample';
@@ -780,4 +844,10 @@ exports.examples = [
return <TextAlignRTLExample />;
},
},
{
title: 'Text `alignItems: \'baseline\'` style',
render: function() {
return <TextBaseLineLayoutExample />;
},
},
];

0 comments on commit 7630a61

Please sign in to comment.