En este post vamos a ver la solución al problema Invariant Violation: Text strings must be rendered within a <Text> component en React Native.

Si has trabajado con React Native, sabrás que no es raro que, conforme vas desarrollando tu aplicación móvil, se produzcan errores por diversos motivos. Entre las causas más comunes de estos errores suelen encontrarse no haber importado los componentes necesarios que después utilizas, o insertar elementos no válidos en el JSX.

React Native error Invariant Violation Text

Es una práctica habitual en React Native el hacer renderizados condicionales de elementos, de forma que un elemento se renderice en caso de que una variable exista o su valor sea truthy. Un ejemplo de este tipo de renderizados sería:

{student.name &&
 <Text>
   {student.name}
</Text>
}

Lo que intentamos conseguir es que el elemento <Text> se muestre solo en el caso de que exista la propiedad que queremos incluir dentro del mismo y esta tenga un valor. El comportamiento esperado sería que, si student.name no existe (valor falsy), no se renderice el <Text>.

El problema viene cuando el valor de student.name es un string vacío. React Native intenta renderizar ese string directamente, sin encontrarse contenido por las etiquetas <Text></Text> del componente texto de React Native. Esto produce el error invariant violation.

¿Cómo podemos solucionarlo? Muy fácil. Podemos hacer uso del operador !!, que convertirá ese string vacío en valor booleano, retornando un false en lugar del string vacío:

{!!student.name &&
<Text>
  {student.name}
</Text>
}


Con esto conseguimos que React Native ejecute correctamente el renderizado condicional y no tenga ningún problema con el hecho de que el valor que estamos comprobando sea un string vacío.

¡Espero que te haya servido! 🙂 Si no quieres perderte ningún nuevo artículo, suscríbete ya mismo a la lista de correo y recibe el contenido gratis en tu email.

📩 Recibe GRATIS todas las novedades

Suscríbete y recibe gratuitamente las novedades de Víctor Martínez en tu email.

¿Te gusta aprender con vídeos? También puedes suscribirte al canal en YouTube y seguir el canal en Twitch para estar al día de todos los vídeos.

¡Compártelo!
Categorías: Programación

Uso de cookies

Me obligan a informarte de que uso cookies para ayudarte a mejorar la experiencia en esta web. Es algo obvio, pero si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies y política de protección de datos.

ACEPTAR
Aviso de cookies