Aprender a usar constantes y funciones de JavaScript dentro de React Native es el paso que convierte una interfaz estática en una aplicación con lógica real. Aquí verás cómo combinar valores, condicionales y operaciones matemáticas con tus etiquetas visuales, algo clave si estás construyendo tus primeras pantallas en móvil.

Todo arranca con un detalle que quizá pasaste por alto: la terminación de tus archivos.

Por qué los archivos terminan en .tsx o .jsx

Si revisas tu proyecto, cada archivo termina en .tsx o .jsx. Esta extensión existe porque el archivo es, por decirlo de forma simple, superdotado [0:14]. No solo contiene JavaScript puro, que llevaría .js, sino que además te permite escribir etiquetas de HTML y estilos de CSS en el mismo lugar.

Esa mezcla es justo lo que hace posible unir la lógica con lo visual sin saltar entre archivos.

¿Qué significa la extensión .tsx? Es un archivo que combina TypeScript con JSX, es decir, permite escribir lógica de JavaScript junto a etiquetas visuales de HTML y CSS en un mismo documento.

Cómo mostrar constantes dentro de etiquetas HTML

El primer concepto práctico es que puedes insertar una constante dentro de tu parte visual usando corchetes. Dentro de un componente text, al colocar la constante entre llaves, unes la parte de JavaScript con la parte visual de HTML [0:59].

Por ejemplo, con una constante de nombre muestras "Allison" directamente en pantalla. Y con una constante de tipo number como edad, puedes operar sobre ella: si la edad es 25, escribir edad + 10 te devuelve la edad que tendrás en 10 años [1:34]. No solo las muestras, también las moldeas a lo que necesites.

Cómo condicionar lo que se muestra en pantalla

Aquí viene lo interesante: puedes decidir qué texto o componente aparece según el valor de una constante. El protagonista es el condicional ternario, una especie de pregunta rápida.

Con una constante premium de tipo booleano en true, haces esta pregunta dentro de los corchetes: si es premium, muestras "este usuario es premium"; si no, muestras "este usuario gratuito" [2:30]. Cambias el valor a false y el texto cambia solo.

¿Qué es un condicional ternario? Es una forma corta de escribir un if-else en una sola línea: evalúa una condición y devuelve un valor si es verdadera y otro si es falsa.

Y no se limita a texto. También funciona con números.

Condicionales fuera de la etiqueta con operadores

Puedes aplicar la lógica por fuera de la etiqueta, no solo dentro. Con una constante message, indicas que si los mensajes son mayores a cero, se muestre un text con la cantidad de mensajes nuevos [3:28].

El detalle clave está aquí:

• Si el valor es mayor a cero, el texto aparece con el número exacto de mensajes.
• Si el valor es cero, simplemente no se muestra nada.
• Esto te permite manejar estados diferentes dentro de la aplicación.

Esta funcionalidad es increíblemente útil porque tu app siempre tendrá estados cambiando, y necesitas condicionarlos.

Cómo usar funciones de JavaScript dentro de una constante

Las constantes no solo guardan valores estáticos. También pueden contener funciones que ya vienen por defecto en JavaScript, como obtener fecha, hora, segundos y milisegundos de forma instantánea [4:28].

Aquí el condicional ternario vive dentro de la constante, no en la etiqueta. Una constante saludo depende de la hora del dispositivo:

• Si la hora es menor a 12, muestra "buenos días".
• Si es mayor a 18, muestra "buenas noches" [5:19].
• El texto se refleja según la hora actual de tu dispositivo.

Así el saludo se adapta solo, sin que toques nada.

Cuándo usar const y cuándo usar let

Hasta ahora todo salió con la palabra const, pero existe otra opción con una diferencia grande. La constante, como su nombre indica, se asigna una vez y sigue siendo la misma [5:46].

En cambio, cuando necesitas un valor que cambie con el tiempo o según una funcionalidad, usas let, porque let sí se puede reasignar después de confirmarlo. Son dos herramientas para dos situaciones distintas.

Cómo crear funciones reutilizables en una carpeta utils

Para ordenar las funcionalidades que usarás en toda la app, creas una carpeta llamada utils y dentro un archivo math, pensado para una pequeña operación matemática [6:23].

En ese archivo aparecen tres conceptos importantes:

1. Funciones que reciben parámetros y, mediante arrow function, ejecutan operaciones como sumar o multiplicar.
2. La arrow function como forma de escribir funciones con parámetros y devolver resultados.
3. La desestructuración, que permite extraer valores de una constante y crearlos en otra variable.

El ejemplo de desestructuración parte de un usuario con nombre y edad, y a partir de esas funcionalidades puedes crear otro usuario, retornando el nombre, la edad y concatenando con más texto u operaciones [7:33].

Cómo importar una función desde otro archivo

Para usar esa función en el index, la traes desde utils. Necesitas los corchetes porque hablas de JavaScript, colocas los paréntesis de la funcionalidad y, lo más importante, la importas desde la carpeta donde vive [8:37].

Al guardar, aparece la cadena de texto construida con las variables que estaban almacenadas dentro de la función.

Recuerda que React Native está basado en JavaScript, así que entre más domines constantes, condicionales, arrow functions y desestructuración, más control tendrás sobre tu aplicación. Si quieres profundizar más, Platzi también tiene una escuela de JavaScript. ¿Qué parte te gustaría practicar primero? Cuéntame en los comentarios.