Entradas

5-50. Componente con Export Default y Export

  Componentes en React: ¿Export Default o Export Normal? Cuando creas componentes en React/React Native, es clave entender cómo exportarlos correctamente. ¡Vamos a diferenciar  export default  de  export  normal con un ejemplo práctico! 📂  Estructura de archivos Primero, creamos una carpeta  components  y dentro un archivo: jsx // Formulario.js import React from 'react' ; import { View , TextInput } from 'react-native' ; 1️⃣  Export Default  (Recomendado para componentes principales) jsx // Dentro de Formulario.js export default function Formulario ( ) { return ( < View > < TextInput placeholder = " Cantidad a pedir " /> </ View > ) ; } ✅  Cómo importarlo : jsx // Puedes usar cualquier nombre al importar import MiFormulario from './components/Formulario' ; 2️⃣  Export Normal  (Para múltiples componentes/helpers) jsx // Dentro del mismo Formulario.js export fu...

4-49. Modificando el StatusBar

  Modificando el StatusBar en React Native ¿Alguna vez has notado que el  StatusBar  (la barra superior del móvil con la hora, batería, etc.) puede chocar visualmente con tu app? ¡Vamos a solucionarlo! 🔍 Problema común Por defecto, el StatusBar en iOS/Android tiene un estilo oscuro. Si tu app tiene un fondo oscuro, el texto negro del StatusBar ¡no se verá! ✨ Solución: Cambiar a modo claro Usando el componente  StatusBar  de React Native, podemos ajustar su estilo en segundos: Importar el componente : javascript import { StatusBar } from 'react-native' ; Añadirlo en tu app : javascript < StatusBar barStyle = "light-content" / > (Usa  "dark-content"  si tu fondo es claro) 📱 Resultado Antes : Texto negro sobre fondo oscuro (invisible). Después : Texto blanco ¡contraste perfecto! 👉  Demo rápida : Si usas Expo, prueba este  ejemplo de la documentación . 💡 Pro tip Personaliza también el color de fondo con  backgroundColor  ...

3-48. Colores globales reutilizables

    Colores Globales Reutilizables en tus Componentes ¿Alguna vez has tenido que cambiar el color primario de una aplicación y terminar modificando decenas de componentes uno por uno? ¡Hay una mejor manera! ¿Por qué usar variables globales para colores? Consistencia : Mantienes la misma paleta en toda la app. Mantenimiento fácil : Cambias el valor en un solo lugar y se actualiza en todos los componentes. Escalabilidad : Ideal para proyectos grandes o temas personalizables (light/dark mode, branding, etc.). Cómo implementarlo en 3 pasos 1️⃣  Crea un fichero de variables Dentro de  src/utils/colors.js , define y exporta tus colores: javascript export default { PRIMARY : "#009683" , PRIMARY_DARK : "#006691" , // ¡Añade más colores aquí! } ; 2️⃣  Importa en tus componentes javascript import colors from "../utils/colors" ; // Uso en estilos (ejemplo en React/JSX) < div style = { { backgroundColor : colors . PRIMARY } } > < / div ...

2- Creando la estructura de nuestra aplicación

    Creando la estructura de nuestra aplicación ¡Comenzamos con la base de nuestro proyecto! 📱💻 En este primer paso, definimos la estructura de la aplicación, que se compone de  3 partes clave : 1️⃣  Cabecera : Contendrá el formulario con los datos del cotitular. 2️⃣  Resultado : Aquí se mostrará el cálculo generado. 3️⃣  Botón inferior : Permitirá recalcular o realizar nuevas operaciones. 👨💻 Implementación en código Usamos  Fragment  para agrupar múltiples elementos sin renderizar contenedores extra. Aplicamos estilos con  StyleSheet  (ejemplo: bordes redondeados, colores, centrado de texto). javascript // Ejemplo de estructura básica < > < View style = { styles . header } > < Text > Formulario de cabecera < / Text > < / View > < View style = { styles . result } > < Text > Resultado < / Text > < / View > < View style = { styles . button } ...

1- Creando mi primera app en React Native

  Creando mi primera app en React Native (Guía paso a paso) ⚡ ¡Hola devs! 👋 Hoy empezamos a crear nuestra app en  React Native  desde cero. ¡Les comparto el proceso! 🔧 Pasos iniciales 1️⃣ Abrimos la terminal y nos ubicamos en la carpeta deseada (ej:  cd Desktop ). 2️⃣ Ejecutamos: bash npx react-native init NombreDelProyecto 3️⃣ Accedemos al proyecto: bash cd NombreDelProyecto 4️⃣ Instalamos dependencias con  yarn  (o  npm install ). 👨‍💻 Abrimos el editor Usando  VS Code : bash code . (Si no funciona, abre VS Code manualmente y selecciona la carpeta del proyecto) . 📱 Ejecutamos la app Para iOS : bash npx react-native run-ios (Necesitas Xcode y un simulador instalado) . Para Android : bash npx react-native run-android (Asegúrate de tener Android Studio y un emulador configurado) . ✅ ¡App funcionando en ambos dispositivos! 🎉 ✍️ Primer componente Modificamos  App.js  para un saludo personalizado: javascript import React from 'react'...