Creación de componentes de React Native con Expo

En esta guía, aprenderás paso a paso cómo crear componentes en React Native, importarlos y utilizarlos eficazmente en tu aplicación móvil con Expo. Este proceso te permitirá reutilizar código, facilitando la organización y desarrollo de tus proyectos en React Native.

¿Cómo levantar tu aplicación en Expo?

Para trabajar con React Native usando Expo, primero debes abrir tu aplicación en un emulador, ya sea de Android o iOS.

• Si tienes Expo instalado, solo necesitas ejecutar expo start.
• Si no tienes Expo o el emulador configurado, utiliza expo ios o expo android según corresponda.

Al abrir Expo Go, tendrás acceso a tu aplicación previamente desarrollada, donde podrás visualizar los componentes y cambios.

¿Cómo crear un componente React Native desde cero?

Es importante organizar los componentes de manera estructurada en tu proyecto React Native:

1. Crea una carpeta src en la raíz del proyecto.
2. Dentro de esta, establece otra carpeta llamada components.
3. Añade dentro de components el fichero de tu componente, por ejemplo LoginForm.js.

Un componente React Native consta principalmente de importaciones y una función de exportación:

import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default function LoginForm() {
  return (
    <View>
      <Text>Componente LoginForm</Text>
    </View>
  );
}

Asegúrate de que el nombre del archivo y el de la función comienzan con mayúsculas, para evitar errores.

¿Cómo importar y utilizar un componente en tu aplicación?

Una vez creado tu nuevo componente, puedes incluirlo fácilmente en otros:

• Debes importarlo en el archivo donde lo utilizarás, por ejemplo en App.js:

import LoginForm from './src/components/LoginForm';

• Para agregarlo a la interfaz, colócalo como una etiqueta más dentro del retorno de la función principal:

<View>
  <LoginForm />
</View>

Observa que los componentes de React Native simulan etiquetas HTML, facilitando su manejo visual y funcional.

¿Cómo implementar un formulario básico en tu componente?

Utilizando elementos básicos como TextInput y Button, podrás brindar interacción a tu componente. Recuerda que los componentes de React Native pueden retornar solo un elemento principal.

Ejemplo práctico de formulario simple:

<View>
  <TextInput placeholder="Email" />
  <TextInput placeholder="Contraseña" />
  <Button title="Enviar" onPress={() => console.log('enviado')} />
</View>

Este sencillo formulario dispondrá campos para correo electrónico y contraseña, además de un botón básico.

Te recomendamos aplicar estilos próximamente para mejorar el aspecto visual de tu aplicación, lo cual tratarás en clases posteriores donde profundizarás más en React Native y su modulo de estilos.

Cuéntanos en los comentarios, ¿qué componentes te gustaría crear próximamente en React Native?