r
r
react-juce
Search
K
Comment on page

Text

A React component for displaying text.
Unlike React Native and React-DOM, Text does not yet support nesting (#6), though it does happily support styling, and touch handling.

Example

import React, { Component } from "react";
import { View, Text } from "react-juce";
function App(props) {
return (
<View {...styles.outer}>
<Text {...styles.labelText}>Hello, </Text>
<Text {...styles.nameText}>{props.name}</Text>
</View>
);
}
const styles = {
outer: {
width: "100%",
height: "100%",
backgroundColor: "#17191f",
justifyContent: "center",
alignItems: "center",
},
labelText: {
color: "#626262",
fontSize: 16.0,
lineSpacing: 1.6,
},
nameText: {
color: "#6262f8",
fontSize: 16.0,
lineSpacing: 1.6,
},
};

Props

Text inherits support for all of the core View properties described in View.

color

The color used to draw the text
Type
Required
Supported
string
No
Standard

fontSize

The font size used to draw the text
Type
Required
Supported
string
No
Partial

fontFamily

The font family name with which to draw the text
Type
Required
Supported
string
No
Partial

fontStyle

Sets whether the text should be rendered bold, italics, or normal.
Type
Required
Supported
string
No
Partial

justification

Sets the horizontal alignment of the text within the container.
TODO: Rename this prop and match the text-align spec
Type
Required
Supported
string
No

kerningFactor

Sets the horizontal spacing between text characters.
TODO: Rename this prop and match the letter-spacing spec
Type
Required
Supported
string
No

lineSpacing

Sets the height of a line box, commonly used to apply vertical spacing between neighboring lines of text.
TODO: Rename this prop and match the line-height spec
Type
Required
Supported
string
No

wordWrap

Sets the word-wrap behavior for when the text content overflows its content box.
Type
Required
Supported
string
No

Styles

Text supports all of the default style properties described in Style Properties.