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

fontSize

The font size used to draw the text

fontFamily

The font family name with which to draw the text

fontStyle

Sets whether the text should be rendered bold, italics, or normal.

justification

Sets the horizontal alignment of the text within the container.

TODO: Rename this prop and match the text-align spec

kerningFactor

Sets the horizontal spacing between text characters.

TODO: Rename this prop and match the letter-spacing spec

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

wordWrap

Sets the word-wrap behavior for when the text content overflows its content box.

Styles

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