AtomText 📝

AtomText es un componente de texto personalizable, que permite renderizar texto con variantes específicas, estilos y formateo condicional para preguntas.

Props 📜

Prop	Tipo	Valor predeterminado	Descripción
variant	textVariants	"title"	La variante de estilo que se aplicará al texto. Corresponde a los estilos predefinidos en textStyles.
style	StyleProp<TextStyle>	undefined	Estilos adicionales que se aplicarán al texto.
isQuestion	boolean	false	Si es true, aplica un formato especial a partes del texto, dividiendo por $.
children	React.ReactNode	requerido	El contenido del componente de texto.
...props	TextProps	n/a	Cualquier otra prop adicional que se pasará al componente Text subyacente.

variant 🎨

• La prop variant permite diferentes estilos de texto predefinidos. Estos estilos están definidos en el objeto textStyles del paquete atomic_components_explorax. Los valores disponibles para variant son:

  • "title"
  • "titleShadow"
  • "text"
  • "textSmall"
  • "textSmallBold"
  • "textSmallest"
  • "textMedium"
  • "textBig"
  • "textBigBold"
  • "textBigBigger"
  • "textBigger"
  • "textBigBlue"
  • "textBigBlueRegular"
  • "textBigBlueBold"
  • "textMediumBigBlue"
  • "textBlue"
  • "textBlueNormal"
  • "textBlueMedium"
  • "textShadow"
  • "textShadowMedium"
  • "textShadowBig"
  • "textLeft"
  • "textLeftSmall"
  • "textBold"
  • "textBoldNormal"
  • "textBoldLineHeight"
  • "subWorld"
  • "headerTitleMission"
  • "correctIncorrectText"
  • "italic"
  • "equalText"
  • "buttonText"
  • "textBoldBlackSmall"
  • "textGrayBold"
  • "bugReport"
  • "textLock"
  • "textQuestionsBlue"
  • "questionContainerText"

isQuestion ❓

• Cuando isQuestion es true, el contenido del texto se dividirá por el carácter $. Las partes del texto que estén entre símbolos $ se estilizarán como negrita, o según el estilo questionContainerText en textStyles.

• Ejemplo:

  <AtomText isQuestion>
    ¿Cuál es la capital de $Francia$?
  </AtomText>

⚠️ Nota: Esta prop solo funciona en la versión móvil. En la versión web, el comportamiento de las preguntas utiliza un componente con lógica distinta. Si se desea utilizar su equivalente, se debe usar la variante questionContainerText en la prop variant y para casos que utilicen números textQuestionsBlue.