status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Valentin Shergin 2018-02-15 17:40:10 -08:00 committed by Facebook Github Bot
parent ad4f54ff6c
commit 7630a614e4
1 changed files with 71 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
RNTester/js/TextExample.ios.js
View File

@ -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 />;
},
},
];