TUTORIAL DE FIREBASE CON REACT NATIVE 2025
Introducción a la integración de Firebase con React Native
React Native es una de las herramientas más populares para desarrollar aplicaciones móviles multiplataforma, mientras que Firebase, respaldado por Google Cloud, ofrece una solución robusta para construir aplicaciones sin necesidad de gestionar servidores backend. En este tutorial, exploraremos cómo integrar React Native con Firebase para crear una aplicación móvil con autenticación, registro de usuarios y operaciones CRUD en Firestore. Este artículo está diseñado para desarrolladores que deseen implementar estas funcionalidades utilizando tanto React Native CLI como Expo CLI, con un enfoque en el Firebase Web SDK, que es compatible con ambas plataformas.
El tutorial cubre la creación de un proyecto en Firebase, la configuración de una aplicación React Native, la implementación de la interfaz de usuario para pantallas de login, registro y página principal, la autenticación con Firebase Auth, la persistencia de credenciales de login y la gestión de datos en Firestore. Al final, tendrás una aplicación funcional con capacidades de autenticación y manipulación de datos en tiempo real, lista para ser ampliada con características adicionales como notificaciones push o almacenamiento de archivos.
Creación de un proyecto en Firebase
Para comenzar, es necesario configurar un proyecto en Firebase. Dirígete a la consola de Firebase y crea una cuenta si no tienes una. Una vez dentro, sigue estos pasos para configurar tu proyecto:
- Crea un nuevo proyecto en la consola de Firebase.
- Activa el método de autenticación por correo electrónico y contraseña en la sección Autenticación -> Métodos de inicio de sesión.
- Añade una aplicación iOS con el ID de paquete
com.reactnativefirebase. - Opcionalmente, añade una aplicación Android con el mismo nombre de paquete.
- Descarga los archivos de configuración generados:
GoogleService-Info.plistpara iOS ygoogle-services.jsonpara Android.
Firebase permite desarrollar aplicaciones sin backend propio, lo que ahorra tiempo al eliminar la necesidad de escribir código del lado del servidor. Este servicio es escalable y proporciona SDKs compatibles con React Native, simplificando la interacción con el backend. Los desarrolladores no necesitan preocuparse por gestionar APIs, parsear datos o manejar sockets, ya que Firebase abstrae estas tareas.
Configuración de una nueva aplicación React Native
El siguiente paso es crear una aplicación React Native compatible con Expo CLI y React Native CLI. Para este tutorial, usaremos Expo CLI por su facilidad para previsualizar aplicaciones, aunque el código será compatible con ambas plataformas al emplear el Firebase Web SDK.
Instala Expo CLI globalmente ejecutando el siguiente comando en tu terminal:
npm install -g expo-cli
Crea un nuevo proyecto con:
expo init react-native-firebase
Selecciona la plantilla “Managed Workflow - Blank”. Luego, inicia la aplicación con:
yarn ios
# o
yarn android
Esto generará un código QR que puedes escanear con la cámara en iOS o la app de Expo en Android para previsualizar la aplicación. Ahora, agrega el SDK de Firebase al proyecto:
yarn add firebase
Para la navegación, instala las dependencias de React Navigation:
yarn add @react-navigation/native @react-navigation/stack && expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
También añade componentes adicionales para la interfaz de usuario:
yarn add react-native-keyboard-aware-scroll-view base-64
Crea un archivo de configuración para Firebase:
mkdir src src/firebase && touch src/firebase/config.js
En src/firebase/config.js, incluye la configuración de tu proyecto obtenida desde la consola de Firebase -> Configuración del proyecto. Un ejemplo de configuración sería:
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
const firebaseConfig = {
apiKey: "tu-api-key",
authDomain: "tu-proyecto.firebaseapp.com",
projectId: "tu-proyecto",
storageBucket: "tu-proyecto.appspot.com",
messagingSenderId: "tu-sender-id",
appId: "tu-app-id",
};
firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const db = firebase.firestore();
Este archivo inicializa Firebase y exporta los módulos de autenticación y Firestore para usarlos en la aplicación.
Estructura de carpetas y configuración de rutas
Organiza el proyecto creando una estructura de carpetas para las pantallas:
mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen
touch src/screens/index.js src/screens/LoginScreen/LoginScreen.js src/screens/LoginScreen/styles.js src/screens/RegistrationScreen/RegistrationScreen.js src/screens/RegistrationScreen/styles.js src/screens/HomeScreen/HomeScreen.js src/screens/HomeScreen/styles.js
En src/screens/index.js, exporta las pantallas para facilitar su importación:
export { default as LoginScreen } from "./LoginScreen/LoginScreen";
export { default as HomeScreen } from "./HomeScreen/HomeScreen";
export { default as RegistrationScreen } from "./RegistrationScreen/RegistrationScreen";
Configura la navegación en App.js:
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { LoginScreen, RegistrationScreen, HomeScreen } from "./src/screens";
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen
name="Registration"
component={RegistrationScreen}
/>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Este código configura un navegador de pila que permite transiciones entre las pantallas de login, registro y página principal.
Implementación de la interfaz de usuario
La interfaz de usuario es un componente clave para la experiencia del usuario. A continuación, implementaremos las pantallas de login, registro y página principal. Este tutorial se centra en la integración con Firebase, por lo que asumimos conocimientos básicos de diseño en React Native.
Para la pantalla de login (src/screens/LoginScreen/LoginScreen.js):
import React, { useState } from "react";
import { View, TextInput, Button, Text, TouchableOpacity } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import styles from "./styles";
export default function LoginScreen({ navigation }) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<KeyboardAwareScrollView contentContainerStyle={styles.container}>
<Text style={styles.title}>Iniciar Sesión</Text>
<TextInput
style={styles.input}
placeholder="Correo electrónico"
value={email}
onChangeText={setEmail}
/>
<TextInput
style={styles.input}
placeholder="Contraseña"
value={password}
onChangeText={setPassword}
secureTextEntry
/>
<Button title="Iniciar Sesión" onPress={() => {}} />
<TouchableOpacity
onPress={() => navigation.navigate("Registration")}
>
<Text style={styles.footerLink}>Crear una cuenta</Text>
</TouchableOpacity>
</KeyboardAwareScrollView>
);
}
Para los estilos en src/screens/LoginScreen/styles.js:
import { StyleSheet } from "react-native";
export default StyleSheet.create({
container: { flex: 1, padding: 20, justifyContent: "center" },
title: { fontSize: 24, marginBottom: 20, textAlign: "center" },
input: { borderWidth: 1, padding: 10, marginBottom: 10 },
footerLink: { marginTop: 20, color: "blue", textAlign: "center" },
});
Implementa de manera similar las pantallas de registro y página principal, ajustando los componentes según las necesidades de cada una. La pantalla de registro debe incluir campos para el nombre completo, correo electrónico y contraseña, mientras que la página principal mostrará un formulario para añadir datos y una lista de elementos.
Registro con Firebase Auth
Para permitir el registro de usuarios, implementa la lógica en RegistrationScreen.js. El método onRegisterPress utiliza la API de Firebase para crear un nuevo usuario:
import firebase from "../firebase/config";
const onRegisterPress = async (fullName, email, password) => {
try {
const response = await firebase
.auth()
.createUserWithEmailAndPassword(email, password);
const user = response.user;
await firebase.firestore().collection("users").doc(user.uid).set({
fullName,
email,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
});
navigation.navigate("Home", { user });
} catch (error) {
alert(error.message);
}
};
Este código crea un usuario con correo y contraseña en Firebase Auth y almacena información adicional, como el nombre completo, en Firestore. Si el registro es exitoso, el usuario es redirigido a la página principal; de lo contrario, se muestra un mensaje de error.
Inicio de sesión con Firebase Auth
Para el inicio de sesión, implementa onLoginPress en LoginScreen.js:
import firebase from "../firebase/config";
const onLoginPress = async (email, password) => {
try {
const response = await firebase
.auth()
.signInWithEmailAndPassword(email, password);
navigation.navigate("Home", { user: response.user });
} catch (error) {
alert(error.message);
}
};
Este método autentica al usuario con sus credenciales y, si es exitoso, lo redirige a la página principal. Firebase maneja la seguridad del proceso de autenticación, garantizando un flujo robusto.
Persistencia de credenciales de login
Para mejorar la experiencia del usuario, implementa la persistencia de login en App.js utilizando el método onAuthStateChanged:
import React, { useState, useEffect } from "react";
import firebase from "./src/firebase/config";
export default function App() {
const [initializing, setInitializing] = useState(true);
const [user, setUser] = useState(null);
useEffect(() => {
const subscriber = firebase.auth().onAuthStateChanged(async (user) => {
if (user) {
const userData = await firebase
.firestore()
.collection("users")
.doc(user.uid)
.get();
setUser({ ...user, ...userData.data() });
} else {
setUser(null);
}
setInitializing(false);
});
return subscriber;
}, []);
if (initializing) return null;
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={user ? "Home" : "Login"}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen
name="Registration"
component={RegistrationScreen}
/>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Este código verifica si hay un usuario autenticado al iniciar la aplicación y carga sus datos desde Firestore. Si el usuario está autenticado, se muestra la página principal; de lo contrario, se muestra la pantalla de login.
Escritura y lectura de datos en Firestore
Para gestionar datos en Firestore, implementa la funcionalidad en HomeScreen.js para agregar y listar elementos en una colección llamada “entities”:
import React, { useState, useEffect } from "react";
import { View, TextInput, Button, FlatList, Text } from "react-native";
import firebase from "../firebase/config";
import styles from "./styles";
export default function HomeScreen({ route }) {
const { user } = route.params;
const [entityText, setEntityText] = useState("");
const [entities, setEntities] = useState([]);
useEffect(() => {
const subscriber = firebase
.firestore()
.collection("entities")
.where("authorID", "==", user.uid)
.orderBy("createdAt", "desc")
.onSnapshot((querySnapshot) => {
const entities = [];
querySnapshot.forEach((doc) => {
entities.push({ ...doc.data(), id: doc.id });
});
setEntities(entities);
});
return subscriber;
}, [user.uid]);
const onAddButtonPress = async () => {
if (entityText) {
await firebase.firestore().collection("entities").add({
text: entityText,
authorID: user.uid,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
});
setEntityText("");
}
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Nueva entidad"
value={entityText}
onChangeText={setEntityText}
/>
<Button title="Añadir" onPress={onAddButtonPress} />
<FlatList
data={entities}
renderItem={({ item }) => <Text>{item.text}</Text>}
keyExtractor={(item) => item.id}
/>
</View>
);
}
Para los estilos en HomeScreen/styles.js:
import { StyleSheet } from "react-native";
export default StyleSheet.create({
container: { flex: 1, padding: 20 },
input: { borderWidth: 1, padding: 10, marginBottom: 10 },
});
Para que la consulta funcione, crea un índice en Firestore. Si ves un error en los logs que menciona la necesidad de un índice, haz clic en el enlace proporcionado en la consola de Firebase y crea el índice solicitado. Esto permitirá consultas filtradas por authorID y ordenadas por createdAt en orden descendente.
Esta implementación permite añadir elementos a la colección “entities” y listarlos en tiempo real. Los cambios en la base de datos, como añadir o eliminar elementos, se reflejan automáticamente en la interfaz gracias al método onSnapshot.
Conclusiones
La integración de Firebase con React Native proporciona una solución poderosa para desarrollar aplicaciones móviles sin necesidad de un backend propio. Este tutorial ha cubierto los pasos esenciales para configurar un proyecto de Firebase, crear una aplicación React Native, implementar autenticación, persistencia de login y operaciones CRUD en Firestore. Con el Firebase Web SDK, la aplicación es compatible con Expo CLI y React Native CLI, ofreciendo flexibilidad a los desarrolladores. Los ejemplos de código presentados son un punto de partida para construir aplicaciones más complejas, como chats en tiempo real o sistemas de notificaciones. Experimenta con estas funcionalidades y considera explorar características avanzadas de Firebase, como almacenamiento de archivos o notificaciones push, para enriquecer tus aplicaciones.
