react-native-ui-lib/src/components/text/text.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "Text",
  "category": "basic",
  "description": "A wrapper for Text component with extra functionality like modifiers support",
  "extends": ["Text"],
  "extendsLink": ["https://reactnative.dev/docs/text"],
  "modifiers": ["margins", "color", "typography"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Modifiers.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Highlights.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Transformation.png?raw=true"
  ],
  "props": [
    {"name": "color", "type": "string", "description": "Color of the text"},
    {"name": "center", "type": "boolean", "description": "Whether to center the text (using textAlign)"},
    {"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
    {"name": "underline", "type": "boolean", "description": "Whether to add an underline"},
    {
      "name": "highlightString",
      "type": "HighlightString | HighlightString[]",
      "description": "Substring to highlight. Can be a simple string or a HighlightStringProps object, or an array of the above"
    },
    {"name": "highlightStyle", "type": "TextStyle", "description": "Custom highlight style for highlight string"},
    {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"},
    {"name": "animated", "type": "boolean", "description": "Use Animated.Text as a container"}
  ],
  "snippet": [
    "<View flex center gap-s2>",
    "<Text text30$1>Text30</Text>",
    "<Text text40 red30>Red</Text>",
    "<Text text60 uppercase>uppercase</Text>",
    "<Text text60 underline>underline</Text>",
    "<Text text70 highlightString='be' highlightStyle={{color: Colors.$textPrimary, fontWeight: 'bold'}}>To be, or not to be</Text>",
    "</View>"
  ],
  "docs": {
    "hero": {
      "title": "Text",
      "description": "An enhanced version of React Native's Text component providing additional features and modifiers support",
      "type": "hero",
      "layout": "horizontal",
      "content": [{}]
    }
  }
}