import React from 'react';
import { Image, Text, View } from 'react-native';
import Example from '../../shared/example';
const Spacer = () => ;
const Heading = ({ children }) => (
);
function Color() {
return (
color
Red color
Blue color
);
}
function FontFamily() {
return (
fontFamily
Cochin
Cochin bold
Helvetica
Helvetica bold
Verdana
Verdana bold
);
}
function FontSize() {
return (
fontSize
Size 23
Size 8
);
}
function FontStyle() {
return (
fontStyle
Normal text
Italic text
);
}
function FontVariant() {
return (
fontVariant
Small Caps{'\n'}
Old Style nums 0123456789{'\n'}
Lining nums 0123456789{'\n'}
Tabular nums{'\n'}
1111{'\n'}
2222{'\n'}
Proportional nums{'\n'}
1111{'\n'}
2222{'\n'}
);
}
function FontWeight() {
return (
fontWeight
Move fast and be ultralight
Move fast and be light
Move fast and be normal
Move fast and be bold
Move fast and be ultrabold
);
}
function LetterSpacing() {
return (
letterSpacing
letterSpacing = 0
letterSpacing = 2
letterSpacing = 9
With size and background color
letterSpacing = -1
[letterSpacing = 3]
[Nested letterSpacing = 0]
[Nested letterSpacing = 6]
);
}
function LineHeight() {
return (
lineHeight
A lot of space should display between the lines of this long passage as
they wrap across several lines. A lot of space should display between
the lines of this long passage as they wrap across several lines.
);
}
function TextAlign() {
return (
textAlign
auto (default) - english LTR
{'\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 ' +
'\u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic ' +
'RTL'}
left left left left left left left left left left left left left left
left
center center center center center center center center center center
center
right right right right right right right right right right right right
right
justify: this text component{"'"}s contents are laid out with
"textAlign: justify" and as you can see all of the lines except the last
one span the available width of the parent container.
);
}
function TextDecoration() {
return (
textDecoration
Solid underline
Double underline with custom color
Dashed underline with custom color
Dotted underline with custom color
None textDecoration
Solid line-through
Double line-through with custom color
Dashed line-through with custom color
Dotted line-through with custom color
Both underline and line-through
);
}
function TextShadow() {
return (
textShadow*
Text shadow example
);
}
function LineExample({ description, children }) {
return (
{description}
{children}
);
}
export default function TextPage() {
return (
Text wraps across multiple lines by default. Text wraps across
multiple lines by default. Text wraps across multiple lines by
default. Text wraps across multiple lines by default.
(Text inherits styles from parent Text elements,
{'\n '}
(for example this text is bold
{'\n '}
(and this text inherits the bold while setting size and color)
{'\n '})
{'\n'})
(Text opacity
{'\n '}
(is inherited
{'\n '}
(and accumulated
{'\n '}
(and also applies to the background)
{'\n '})
{'\n '})
{'\n'})
This text contains an inline blue view{' '}
{' '}
and an inline image{' '}
.
This text contains a view{' '}
which contains
another text.
And contains another view
which contains another text!
{' '}
And then continues as text.
This text is selectable if
you click-and-hold.
This text is{' '}
not selectable
{' '}
if you click-and-hold.
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
goal aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Spaces
between
words
Spaces
between
words
);
}