text

El componente text es fundamental para mostrar texto dentro de la interfaz de usuario. Puede ser utilizado en combinación con otros elementos contenedores, como box, para crear contenido textual estilizado. Este componente ofrece una amplia gama de propiedades que permiten personalizar la apariencia del texto, incluyendo color, tamaño, alineación, y más, brindando la flexibilidad necesaria para adaptarse a cualquier diseño.

Props

`style`

Permite aplicar estilos personalizados al componente text. Basado en el componente Text de React Native, las propiedades disponibles incluyen:

color: indicar el color del texto. Formato hexadecimal.
fontFamily: indicar la familia de fuente a utilizar.
fontSize: indica el tamaño de la fuente. Es un valor entero.
fontStyle: enum(‘normal’, ‘italic’)
fontWeight: enum(‘normal’, ‘bold’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’). Indica “peso” del texto (el ancho de como se mostrará)
lineHeight: indica el alto de la línea del texto. Valor numérico entre comillas simples.
textAlign: enum(‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’)
textAlignVertical (android): enum(‘auto’, ‘top’, ‘bottom’, ‘center’)
textShadowColor: Indica el color de la sombra del texto.
textTransform: enum(‘none’, ‘uppercase’, ‘lowercase’, ‘capitalize’). Default none
userSelect: enum(‘auto’, ‘text’, ‘none’, ‘contain’, ‘all’). Default none

`numberOfLines`

Define el número máximo de líneas que el texto mostrará. Si el texto excede este número, será truncado.

ellipsizeMode: Controla cómo se trunca el texto cuando es demasiado largo. Las opciones comunes son head, middle, tail, que determinan dónde se agrega la elipsis (...).

Example

<screen>
  <meta>
    <header>Text Example</header>
  </meta>
  <body>
    <box>
      <text>Hola mundo</text>
      <text style="color: '#cc0000'; fontSize: '24'">Hola mundo</text>
    </box>
  </body>
</screen>