El inicio de sesión de Google es una excelente función de inicio de sesión para ofrecer a los usuarios de su aplicación. Les facilita crear una cuenta e iniciar sesión.

Y lo que es aún mejor, Firebase hace que sea extremadamente fácil para los desarrolladores agregar soporte para el inicio de sesión de Google. Pero configurar el entorno de React Native puede crear algunos desafíos, que se cubren completamente en este tutorial.

React Native y Firebase SDK hacen que la implementación del inicio de sesión de Google sea bastante sencilla. Construyamos una aplicación simple que solo tenga un botón de inicio de sesión de Google. Una vez que el usuario inicie sesión con éxito en Google, mostraremos la información del usuario recuperada de su cuenta de Google, así como un botón de cierre de sesión.

También puede agregar Facebook Login a su aplicación si está interesado en brindar aún más opciones de inicio de sesión a sus usuarios. Puede consultar esta guía para iniciar sesión con Facebook en React Native con Firebase si desea obtener más información sobre cómo configurar el inicio de sesión con Facebook.

¿Por qué usar un botón de inicio de sesión de Google en aplicaciones móviles?

1. El uso de Google u otros terceros puede hacer que su proceso de autenticación sea sencillo y amigable. Los usuarios no tienen que perder tiempo en el proceso de registro, lo que mejorará enormemente sus tasas de registro y retención.
2. Es segura y protegida.
3. Los usuarios confían más en Google o Facebook que en un sitio o aplicación desconocidos en Internet.
4. Proporciona una buena experiencia de usuario. Como usuario, tenemos poca paciencia para cualquier acción o trabajo que necesitemos hacer, especialmente en una aplicación bastante desconocida que estamos probando por primera vez.

Sin más preámbulos, pasemos directamente a la parte de desarrollo de aplicaciones de este tutorial.

Configuración del proyecto Firebase

Vaya a Firebase Console y cree un proyecto de Firebase:

Aquí, necesitaremos configurar el nombre del proyecto Firebase y el identificador de la aplicación, así que primero creemos la aplicación React Native.

Creando el proyecto React Native

Primero, necesitamos crear un proyecto React Native usando el siguiente comando:

react-native init instamobile-google-login-demo

Aquí, hemos dado el nombre del proyecto como instamobile-google-login-demo. Ahora, necesitamos instalar el paquete react-native-google-signin usando el siguiente comando:

yarn add react-native-google-singin

El paquete react-native-google-signin se utiliza para implementar las funciones de autenticación de Google en la aplicación React Native. Ahora, necesitamos importar los módulos y componentes necesarios del paquete respectivo como se muestra en el fragmento de código a continuación:

import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from 'react-native-google-signin';

A continuación, necesitamos crear los estados para manejar el estado de autenticación y la información del usuario. Para eso usamos el módulo useState como se muestra en el fragmento de código a continuación:

const [loggedIn, setloggedIn] = useState(false);
const [userInfo, setuserInfo] = useState([]);

Ahora, necesitamos crear una función de inicio de sesión para manejar la autenticación como se muestra en el fragmento de código a continuación:

_signIn = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const {accessToken, idToken} = await GoogleSignin.signIn();
    setloggedIn(true);
  } catch (error) {
    if (error.code === statusCodes.SIGN_IN_CANCELLED) {
      // user cancelled the login flow
      alert('Cancel');
    } else if (error.code === statusCodes.IN_PROGRESS) {
      alert('Signin in progress');
      // operation (f.e. sign in) is in progress already
    } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
      alert('PLAY_SERVICES_NOT_AVAILABLE');
      // play services not available or outdated
    } else {
      // some other error happened
    }
  }
};

A continuación, debemos inicializar la configuración del objeto de inicio de sesión de Google aprovechando la función useEffect :

useEffect(() => {
   GoogleSignin.configure({
     scopes: ['email'], // what API you want to access on behalf of the user, default is email and profile
     webClientId:
       '418977770929-g9ou7r9eva1u78a3anassxxxxxxx.apps.googleusercontent.com', // client ID of type WEB for your server (needed to verify user ID and offline access)
     offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER
   });
 }, []);

Por último, necesitamos una función que maneje la acción de cierre de sesión. Para eso, vamos a implementar el método signOut como se muestra en el fragmento de código a continuación:

signOut = async () => {
    try {
      await GoogleSignin.revokeAccess();
      await GoogleSignin.signOut();
      setloggedIn(false);
      setuserInfo([]);
    } catch (error) {
      console.error(error);
    }
  };

Ahora, también necesitamos renderizar los componentes en la pantalla. Para eso, vamos a hacer uso de varios componentes como View y Button:

return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />

          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <GoogleSigninButton
                style={{width: 192, height: 48}}
                size={GoogleSigninButton.Size.Wide}
                color={GoogleSigninButton.Color.Dark}
                onPress={this._signIn}
              />
            </View>
            <View style={styles.buttonContainer}>
              {!loggedIn && <Text>You are currently logged out</Text>}
              {loggedIn && (
                <Button
                  onPress={this.signOut}
                  title="LogOut"
                  color="red"></Button>
              )}
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );

Ahora bien, si ejecutamos nuestro proyecto en el emulador obtendremos los siguientes resultados:

Bastante dulce, ¿verdad? Hemos completado la implementación (tanto de la interfaz de usuario como de la lógica empresarial) en el nivel de React Native en nuestro proyecto.

Como puede ver, tenemos un botón "Iniciar sesión con Google" que se convierte en un botón de cierre de sesión una vez que la operación de inicio de sesión se completa con éxito.

Ahora vamos a configurar el paquete de inicio de sesión de Google y la aplicación Firebase.

Configuración de los proyectos nativos de iOS y Android

Hay algunos pasos de configuración que debemos seguir antes de que el proyecto funcione por completo. En su mayoría están relacionados con el lado nativo real de la aplicación.

Para iOS

Aquí, en VSCode (o cualquier Terminal) simplemente ejecute cd ios && pod install. Luego abra el archivo .xcworkspace en Xcode (desde la carpeta ios) y asegúrese de que los Pods estén incluidos:

Para Android

1. Primero, necesitamos vincular el módulo nativo.

• En RN >= 0.60 no debería necesitar hacer nada gracias a la vinculación automática.
• En RN < 0.60 ejecute el enlace react-native link react-native-google-signin.

2. Actualice android/build.gradle con la siguiente configuración:

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
        googlePlayServicesAuthVersion = "16.0.1" // <--- use this version or newer
    }
...
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2' // <--- use this version or newer
        classpath 'com.google.gms:google-services:4.1.0' // <--- use this version or newer
    }
...
allprojects {
    repositories {
        mavenLocal()
        google() // <--- make sure this is included
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

3. Actualiceandroid/app/build.gradle con la siguiente configuración:

...
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:23.0.1"
    implementation "com.facebook.react:react-native:+"
    implementation(project(":react-native-community_google-signin")) // <--- add this dependency
}

Verifique que vinculó el módulo nativo react-native link  – pero solo si usaste react-native link!

En android/settings.gradle  deberíamos tener las siguientes configuraciones:

...
include ':react-native-google-signin', ':app'
project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')

A continuación, en MainApplication.java ,deberíamos agregar el paquete de Google como en el siguiente fragmento de código:

import co.apptailor.googlesignin.RNGoogleSigninPackage;  // <--- import

public class MainApplication extends Application implements ReactApplication {

  ......

  @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNGoogleSigninPackage() // <-- this needs to be in the list
      );
    }
  ......

}

Configuración para Firebase

Para iOS

Ahora, debemos comenzar con la configuración de Firebase. En Firebase, necesitamos configurar una aplicación en la nube de Google. Pero cuando configuramos el método de autenticación en Firebase, esto también crea una aplicación en la nube de Google.

Primero, necesitamos crear la aplicación Firebase iOS para obtener GoogleServiceinfo.plist como se muestra en la siguiente captura de pantalla:

A continuación, copiamos el archivo GoogleService-info.plist al proyecto Xcode como se muestra en la siguiente captura de pantalla:

Ahora, debemos agregar la ID de cliente invertida presente en el archivo GoogleService-info.plist a los tipos de URL, como se muestra en la siguiente captura de pantalla:

El siguiente paso es ir a Info → URL Types y luego completar los URL Schemes como se muestra en la siguiente captura de pantalla:

Para Android

Primero, necesitamos crear una aplicación de Android en Firebase. Para eso, necesitamos un nombre de paquete y un certificado SHA-1 de nuestra aplicación. Luego, podemos registrar la aplicación Firebase como se muestra a continuación:

Podemos obtener el nombre del paquete en MainApplication.java de nuestro proyecto como se destaca en el fragmento de código a continuación:

A continuación, podemos obtener la clave SHA-1 en el archivo Keystore. En el directorio android/app, podemos ejecutar el comando:

cd android/app ; 
keytool -exportcert -keystore debug.keystore -list -v

Luego, aparecerá la clave SHA-1, como se muestra en la siguiente captura de pantalla:

Después de crear con éxito la aplicación de configuración de Firebase, debemos descargar el archivo google-services.json y copiarlo en el directorio, como se muestra en la siguiente captura de pantalla:

Ahora, el paso final es configurar un componente de inicio de sesión de Google en Android.

Instalación del paquete React Native Firebase

Para instalar el paquete react-native-firebase versión 6, debemos ejecutar el siguiente comando en el símbolo del sistema de nuestro proyecto:

# Using npm 
npm install --save @react-native-firebase/app 
# Using Yarn 
yarn add @react-native-firebase/app

El módulo @react-native-firebase/app debe instalarse antes de usar cualquier otro servicio de Firebase.

Para iOS

Ya tenemos GoogleService-Info.plist agregado a Xcode. Lo que queda es permitir que Firebase en iOS use las credenciales. El SDK de Firebase iOS debe configurarse durante la fase de arranque de su aplicación.

Para hacer esto, debemos abrir nuestro archivo /ios/{projectName}/AppDelegate.m , y agregar lo siguiente:

En la parte superior del archivo, necesitamos importar el SDK de Firebase:

#import <Firebase.h>

Dentro de su método didFinishLaunchingWithOptions existente, debemos agregar lo siguiente en la parte superior del método:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Add me --- \/
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  // Add me --- /\
  // ...
}

Finalmente, debemos ejecutar el siguiente comando para finalizar la instalación del paquete CocoaPods:

cd ios ; pod install

Eso es todo. Ahora hemos completado la instalación del paquete principal de Firebase en iOS

Para Android

Necesitamos configurar Firebase con credenciales de Android. Para permitir que Firebase en Android use las credenciales, el complemento de servicios de Google debe estar habilitado en el proyecto. Esto requiere la modificación de dos archivos en el directorio de Android.

Primero, agregue el complemento de servicios de Google como una dependencia dentro de su archivo android/build.gradle:

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.2.0'
    // Add me --- /\
  }
}
Lastly, execute the plugin by adding the following to the very bottom of your /android/app/build.gradle file:

apply plugin: 'com.google.gms.google-services'

Módulo de autenticación React Native Firebase

Una vez completada la instalación, debemos configurar el paquete principal de Firebase. A continuación, necesitamos instalar el módulo secundario para la autenticación. Para eso, necesitamos abrir una terminal y ejecutar el siguiente comando:

yarn add @react-native-firebase/auth

Para iOS

Solo necesitamos instalar los pods nuevamente en el símbolo del sistema:

cd ios/ && pod install

Para Android

Puede seguir las instrucciones en la documentación oficial que solo se requiere si está utilizando React Native <= 0.59 o necesita integrar manualmente la biblioteca.

Activar el inicio de sesión de Google en Firebase

Tenemos que ir a la consola de Firebase. Luego, en la sección Autenticación, debemos hacer clic en Google como se muestra en la siguiente captura de pantalla:

A continuación, debemos habilitar la configuración con la siguiente configuración y guardar la configuración como se muestra en la captura de pantalla a continuación:

En App.js, necesitamos importar la autenticación del paquete Firebase como se muestra en el fragmento de código a continuación:

import auth from '@react-native-firebase/auth';

A continuación, debemos integrar la configuración de autenticación a la función de sign-in. Después de un inicio de sesión exitoso, almacenamos accessToken y idToken en Firebase. Ahora, podemos intentar iniciar sesión con Google en nuestra aplicación de demostración React Native.

_signIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const {accessToken, idToken} = await GoogleSignin.signIn();
      setloggedIn(true);
      const credential = auth.GoogleAuthProvider.credential(
        idToken,
        accessToken,
      );
      await auth().signInWithCredential(credential);
    } catch (error) {

Ahora hemos completado con éxito la integración de Google Sign-in en nuestra aplicación React Native:

Podemos ver nuevos datos que se agregan a Firebase Console:

Seguimiento del estado del usuario

Para verificar el estado de inicio de sesión del usuario, usamos Firebase Auth. Para eso, necesitamos agregar el método onAuthStateChanged a useEffect para que se ejecute en cada llamada de evento componentDidMount.

Además, debemos pasar una devolución de llamada a la función denominada onAuthStateChanged como argumento, como se muestra en el fragmento de código a continuación:

useEffect(() => {
    .............
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

En la función onAuthStateChanged, manejamos los datos del estado local como se muestra en el fragmento de código a continuación:

function onAuthStateChanged(user) {
    setUser(user);
    console.log(user);
    if (user) setloggedIn(true);
  }

Ahora, necesitamos almacenar los datos de usuario para el estado. Luego, intente mostrar los datos del usuario después de un inicio de sesión exitoso. Para eso, necesitamos usar la siguiente pieza de código:

{!user && <Text>You are currently logged out</Text>}
{user && (
  <View>
    <Text>Welcome {user.displayName}</Text>
    <Button
      onPress={this.signOut}
      title="LogOut"
      color="red"></Button>
  </View>
)}

Obtendremos el siguiente resultado en nuestro simulador:

Cerrar sesión de Firebase

Para cerrar sesión, debemos eliminar todas las credenciales del usuario y revocar el token de inicio de sesión de Google.

Primero, debemos esperar a que el módulo GoogleSignin revoque el acceso y cierre la sesión. Luego, llamamos al método de signOut de Firebase auth para cerrar sesión con éxito.

La implementación general del código se proporciona en el siguiente fragmento de código:

signOut = async () => {
    try {
      await GoogleSignin.revokeAccess();
      await GoogleSignin.signOut();
      auth()
        .signOut()
        .then(() => alert('Your are signed out!'));
      setloggedIn(false);
      // setuserInfo([]);
    } catch (error) {
      console.error(error);
    }
  };

Como resultado, ahora podemos realizar operaciones de cierre de sesión como se muestra en el fragmento de código a continuación:

Conclusion

En este tutorial, aprendimos a configurar Google Login, además de almacenar un token de acceso, aprovechando Firebase en nuestro proyecto React Native.

Primero, creamos el proyecto React Native con todos los componentes necesarios y configuraciones de funciones. Luego, aprendimos cómo configurar Google Sign In y Firebase para las plataformas Android e iOS. Finalmente, configuramos Firebase en la aplicación React Native usando un paquete de Firebase y mostramos los datos del usuario junto con el botón de cierre de sesión.

Puede descargar el código fuente completo de este tutorial desde Github.

La mejor parte es que Firebase y Google Auth son compatibles con todos los lenguajes de desarrollo móvil, como Flutter, Swift o Kotlin. Los pasos de configuración y el enfoque arquitectónico son exactamente los mismos.

Si te gustó este tutorial de React Native, dame una estrella en el repositorio de Github y compártelo con tu comunidad. Puede consultar aún más proyectos React Native gratuitos en Instamobile. ¡Salud!

En este tutorial, vamos a construir una aplicación React Native que está integrado con un backend de Firebase. La aplicación soportará tanto el CLI de React Native como el CLI de Expo.

Este tutorial de React Native Firebase cubrirá las características principales como autenticación, registro, y operaciones CRUD de bases de datos (Firestore).

Puedes también descargar todo el código abierto desde Github si quieres saltar directo al código.

Este tutorial te llevará a través de los detalles de las siguientes secciones:

1. Crear un proyecto de Firebase
2. Crear & configurar una nueva aplicación React Native
3. Configurar la estructura de carpeta, rutas, y navegación
4. Implementar la UI para el Login, el Registro, y las ventanas de Inicio
5. Registro con Firebase Auth
6. Inicio de Sesión con Firebase Auth
7. Credenciales de Inicio de Sesión Persistentes
8. Escribir y leer datos desde Firebase Firestore

Sin más, comencemos a construir el proyecto de React Native Firebase. La aplicación móvil final se verá así:

1. Crear un proyecto de Firebase

Ver a Firebase.com y crea una nueva cuenta. Una vez que inicies sesión, serás capaz de crear un nuevo proyecto en la Consola de Firebase.

• Crear una nueva cuenta en Firebase.com
• Crear un nuevo proyecto en la Consola de Firebase
• Permitir método de autenticación con Email & Contraseña en Firebase Console -> Authentication -> Sign-in method

• Crear una nueva aplicación iOS, con el ID App com.reactnativefirebase

• (Opcional) Crear una nueva aplicación Android con el nombre de paquete com.reactnativefirebase
• Descargar el archivo de configuración generado en el siguiente paso a tu computadora (GoogleService-Info.plist para iOS, y google-services.json para Android)

Firebase te permite construir aplicaciones sin backend. Es un producto que corre sobre la Nube de Google, y permite a los desarrolladores construir aplicaciones web y móviles sin necesidad de tener sus propios servidores.

Esto ahorra mucho tiempo, ya que no necesitas escribir ningún código de backend. Es altamente escalable también, siendo soportado por la infraestructura de Google.

En Firebase, serás capaz de almacenar todo lo que es necesario para tu aplicación – usuarios, datos, archivos, enviar tokens de notificación, etc. Toda esta información se hace disponible a los clientes móviles via los SDKs de Firebase, lo cuales son compatibles con React Native. Esto significa que todas las interacciones con el backend son abstraídos y encapsulados en el SDK, así los desarrolladores móviles se preocupen sobre llamadas API, conversiones de datos, gestión de sockets, y así sucesivamente.

2. Crear y configurar una nueva aplicación React Native

Vamos a hacer nuestra aplicación React Native con Firebase compatible tanto con el CLI de Expo como con el CLI de React Native.

Vamos a usar Expo por ahora, ya que lo hace fácil a los principiantes para previsualizar sus aplicaciones. Pero no usaremos ninguna librería específica de Expo, así que el código de src puedes ser simplemente usado en cualquier aplicación de React Native, sin importar de su estructura.

Vamos a usar el SDK Web de Firebase, el cual es compatible con Expo y con el CLI de React Native, y es soportado directamente por Google.

Si quieres usar react-native-firebase, siéntete libre de instalarlo y configurarlo (el código aún será el mismo). Pero ten en mente que no lo recomiendo por unas pocas razones:

• no está soportado directamente por Google, así que mantenerlo serás más duro dado que es una capa extra que puede causar errores, y
• tampoco funciona con Expo, lo que puedes ser un factor decisivo para muchos desarrolladores.

Los pasos abajo están también cubiertos en la documentación oficial de React Native en como configurar tu entorno de desarrollo.

• Instalar el CLI de Expo

En tu Terminal, simplemente ejecuta

npm install -g expo-cli

• Crea una nueva aplicación React Native ejecutando

expo init react-native-firebase

Para la plantilla, elige el Managed Workflow — Blank

• Comienza la aplicación ejecutando

yarn ios
// or
yarn android

Esto también te presentará con un código QR el cual puedes escanear usando la aplicación Cámara en iOS, o la aplicación Expo en Android.

Esto es genial. Ahora tenemos una nueva aplicación React Native, ejecutándose tanto en iOS como en Adroid. Empecemos conectándolo a tu backend de Firebase.

• Agregar el SDK de Firebase al proyecto de React Native

yarn add firebase

• Agregar la librería de Navegación de React Native Navigation ejecutando

yarn add @react-navigation/native && yarn add @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

• Agregar varios componentes UI y paquetes a ser usados en el proyecto

yarn add react-native-keyboard-aware-scroll-view base-64

Crear un archivo de configuración de Firebase

mkdir src src/firebase && touch src/firebase/config.js

Agregar tu configuración de Firebase en src/firebase/config.js:

import * as firebase from 'firebase';
import '@firebase/auth';
import '@firebase/firestore';

const configuracionFirebase = {
  claveAPI: 'TU_CLAVE_AQUI_AIzasyAOWH',
  dominioAuth: 'tu-dominio-auth-b1234.firebaseapp.com',
  urlBaseDeDatos: 'https://tu-nombre-basededatos-firebaseio.com',
  idProyecto: 'tu-id-proyecto-1234',
  presupuestoAlmacenamiento: 'tu-id-proyecto-1234.appspot.com',
  idRemitenteMensajes: '12345-insertar-tuyo',
  idApp: 'inserta el tuyo: 1:1234:web:ee873bdu1234codeb7eba61ce',
 }
 
 if (!firebase.apps.length) {
 	firebase.initializeApp(configuracionFirebase);
 }
 
 export {firebase};

Puedes obtener toda esta información desde Firebase Console -> Project Settings

3. Crear la estructura de carpeta y configurar las rutas y la navegación

• Crea la estructura de carpeta ejecutando

mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen

• Crea la estructura de archivos ejecutando

touch src/screens/index.js src/screens/LoginScreen/LoginScreen.js src/screens/LoginScreen/styles.js src/screens/RegistrationScreen/RegistrationScreen.js src/screens/styles.js src/screens/HomeScreen/HomeScreen.js src/screens/HomeScreen/styles.js

• Agrega este código a src/screens/index.js

export { default as LoginScreen } from './LoginScreen/LoginScreen'

export { default as HomeScreen } from './HomeScreen/HomeScreen'

export { default as RegistrationScreen } from './RegistrationScreen/RegistrationScreen'

¡No te preocupes si el proyecto está roto! Todo tendrá sentido en un ratito.

• Configurar las rutas & navegadores

Sobreescribe el archivo App.js con el siguiente fragmento de código:

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/natie';
import { createStackNavigator } from '@react-navigation/stack';
import { LoginScreen, HomeScreen, RegistrationScreen } from './src/screens';
import { decode, encode } from 'base-64';

if (!global.btoa) { global.btoa = encode }
if (!global.atob) { global.atob = decode }

const Stack = createStackNavigator();

export default function App() {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState(null);
  
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {  user? (
          <Stack.Screen name="Home">
            {props => <Homescreen {...props} extraData={user} />}
          </Stack.Screen>
          ) : (
            <>
              <Stack.Screen name="Login" component={LoginScreen} />
              <Stack.Screen name="Registration" component={RegistrationScreen} />
            </>
          )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4. Implementar la UI

Ahora que tenemos la estructura de la aplicación, vamos a continuar hacia adelante e implementemos los componentes UI de todas las pantallas. No vamos a ir en detalle sobre el diseño flex y el diseño de React Native, ya que está fuera del enfoque para este tutorial. Vamos a enfocarnos mayormente en la integración de React Native con Firebase.

Simplemente sobreescribe los archivos como sigue:

• src/LoginScreen/LoginScreen.js

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { KeyboardAdwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import styles from './styles'

export default function LoginScreen({ navigation }) {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  
  const onFooterLinkPress = () => {
    navigation.navigate('Registration')
  }
  
  const onLoginPress = () => {
  }
  
  return (
    <View style={styles.container}>
      <KeyboardAwareScrollView
        style={{ flex: 1, width: '100%' }}
        keyboardShouldPersistTaps="always">
        <Image
          style={styles.logo}
          source={require('../../../assets/icon.png')}
        />
        <TextInput
          style={styles.input}
          placeholder="E-mail"
          placeholderTextColor="#aaa"
          onChangeText={(text) => setEmail(text)}
          value={email}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholderTextColor="#aaa"
          secureTextEntry
          placeholder="Password"
          onChangeText={(text) => setPassword(text)}
          value={password}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TouchableOpacity
          style={styles.button}
          onPress={() => onLoginPress()}>
          <Text style={styles.buttonTitle}>Log in</Text>
        </TouchableOpacity>
        <View style={styles.footerView}>
          <Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
        </View>
      </KeyboardAwareScrollView>
    </View>
  )
}

• src/LoginScreen/styles.js

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  title: {
  
  },
  logo: {
    flex: 1,
    height: 120,
    width: 90,
    alignSelf: "center",
    margin: 30
  },
  input: {
    height: 48,
    borderRadius: 5,
    overflow: 'hidden',
    backgroundColor: 'white',
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 30,
    paddingLeft: 16
  },
  button: {
    backgroundColor: '#788eec',
    marginLeft: 30,
    marginRight: 30,
    marginTop: 20,
    height: 48,
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonTitle: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  },
  footerView: {
    flex: 1,
    alignItems: 'center',
    marginTop: 20
  },
  footerText: {
    fontSize: 16,
    color: '#2e2e2d'
  },
  footerLink: {
    color: '#788eec',
    fontWeight: 'bold',
    fontSize: 16
})

• src/RegistrationScreen/RegistrationScreen.js

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';

export default function RegistrationScreen({ navigation }) {
  const [fullName, setFullName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  
  const onFooterLinkPress = () => {
    navigation.navigate('Login')
  }
  
  const onRegisterPress = () => {
  
  }
  
  return (
    <View style={styles.container}>
      <KeyboardAwareScrollView
        style={{ flex: 1, width: '100%' }}
        keyboardShouldPersistTaps="always">
        <Image
          style={styles.logo}
          source={require('../../../assets/icon.png')}
        />
        <TextInput
          style={styles.input}
          placeholder="Fullname"
          placeholderTextColor="#aaa"
          onChangeText={(text) => setFullName(text)}
          value={fullName}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholder="Email"
          placeholderTextColor="#aaa"
          onChangeText={(text) => setEmail(text)}
          value={email}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholderTextColor="#aaa"
          secureTextEntry
          placeholder="Password"
          onChangeText={(text) => setPassword(text)}
          value={password}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholderTextColor="#aaa"
          secureTextEntry
          placeholder="Confirm Password"
          onChangeText={(text) => setConfirmPassword(text)}
          value={confirmPassword}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TouchableOpacity
          style={styles.button}
          onPress={() => onRegisterPress()}>
          <Text style={styles.buttonTitle}>Create account</Text>
        </TouchableOpacity>
        <View style={styles.footerView}>
          <Text style={styles.footerText}>Already got an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Log in</Text></Text>
        </View>
      </KeyboardAwareScrollView>
    </View>
  )
}

• src/RegistrationScreen/styles.js

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  title: {
  
  },
  logo: {
    flex: 1,
    height: 120,
    width: 90,
    alignSelf: 'center',
    margin: 30
  },
  input: {
    height: 48,
    borderRadius: 5,
    overflow: 'hidden',
    backgroundColor: 'white',
    marginTop: 10,
    marginBottom: 10,
    marginRight: 30,
    paddingLeft: 16
  },
  button: {
    backgroundColor: '#788eec',
    marginLeft: 30,
    marginRight: 30,
    marginTop: 20,
    height: 48,
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonTitle: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  },
  footerView: {
    flex: 1,
    alignItems: 'center',
    marginTop: 20
  },
  footerText: {
    fontSize: 16,
    color: '#2e2e2d'
  },
  footerLink: {
    color: '#788eec',
    fontWeight: 'bold',
    fontSize: 16
  }
})

• src/HomeScreen/HomeScreen.js

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

export default function HomeScreen(props) {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  )
}

• src/HomeScreen/styles.js

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  input: {
    height: 48,
    borderRadius: 5,
    overflow: 'hidden',
    backgroundColor: 'white',
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 30,
    marginRight: 30,
    paddingLeft: 16
  }
})

A este punto, tu aplicación debería ejecutarse apropiadamente y mostrar las siguientes pantallas (UI solamente):

Puedes cambiar entre las dos pantallas tocando los botones de enlaces en el pie de página.

Ahora que tenemos una UI hermosa para iniciar sesión y registrarse, veamos cómo podemos integrar nuestra aplicación React Native (y Expo) con Firebase.

5. React Native con Firebase — Registro

Empecemos con crear una nueva cuenta con Firebase Auth, ya que naturalmente el inicio de sesión viene después. Para esto, vamos a agregar la lógica de Firebase para crear una nueva cuenta con email & contraseña en el RegistrationScreen.js, implementando el método onRegisterPress como sigue:

// ... El mismo código de antes continúa y agregamos 
import { firebase } from "../../firebase/config"
// ...

export default function RegistrationScreen({ navigation }) {
  // ... El mismo código de antes continúa y agregamos
  const onRegisterPress = () => {
    if (password !== confirmPassword) {
      alert("Passwords don't match."),
      return
    }
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((response) => {
        const uid = response.user.uid
        const data = {
          id: uid,
          email,
          fullName
        },
        const usersRef = firebase.firestore().collection('users')
        usersRef
          .doc(uid)
          .set(data)
          .then(() => {
            navigation.navigate('Home', { user: data })
          })
          .catch((error) => {
            alert(error)
          })
        })
        .catch((error) => {
          alert(error)
        }
      })
    }
    // ...
}

En el flujo de creación de cuenta de arriba, hacemos un par de cosas importantes:

• Llamamos a la API createUserWithEmailAndPassword de Auth de Firebase (línea 13), el cual crea una nueva cuenta que se mostrará en Firebase Console -> Authentication table.
• Si el registro de la cuenta fue exitosa, también almacenamos los datos del usuario en el Firestore  de Firebase (línea 24). Esto es necesario para almacenar información extra del usuario, tal como el nombre completo, URL de la foto de perfil, y así sucesivamente, el cual no puede ser almacenado en la tabla de Autenticación.
• Si el registro fue exitoso, navegamos al Home Screen, pasando los datos del objeto del usuario también.
• Si algún error ocurre, simplemente lo mostramos en una alerta. Los errores pueden ser cosas como conexión de red, contraseñas demasiadas cortas, email inválido, y así sucesivamente.

Recarga tu aplicación y prueba el registro. Si creó una cuenta exitosamente, verifícalo si se muestra en Firebase Console -> Authentication:

6. React Native con Firebase — Inicio de sesión

Ahora que somos capaz de crear nuevas cuentas, implementemos la funcionalidad de iniciar sesión. El SDK de Firebase se encarga de todos los pasos de autorización y autenticación para un inicio de sesión seguro.

Abre LoginScreen.js, importa Firebase y completa el método onLoginPress:

...
import { firebase } from '../../firebase/config'
...

export default function LoginScreen({ navigation }) {
  ...
  const onLoginPress = () => {
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then((response) => {
        const uid = response.user.uid
        const usersRef = firebase.firestore().colecction('users')
        usersRef
          .doc(uid)
          .get()
          .then(firestoreDocument => {
            if (!firestoreDocument.exists) {
              alert("User does not exist anymore".)
              return;
            }
            const user = firestoreDocument.data()
            navigation.navigate('Home', {user})
          })
          .catch(error => {
            alert(error)
          })
        })
      .catch(error => {
        alert(error)
      })
  }
  ...
}

Recarga tu aplicación y ve hacia adelante e inicia sesión con una cuenta existente. La aplicación debería llevarte a la pantalla de inicio si las credenciales eran correctas, o te alertará con un error si algo anduvo mal.

7. Persistir las credenciales de inicio de sesión

Notarás que si quitas las aplicación y lo abres nuevamente, te mostrará la pantalla de inicio de sesión otra vez. Para una buena experiencia de usuario, nos gustaría que lleguen todos los usuarios que iniciarion sesión en la pantalla de Inicio. Nadie quiere escribir sus credenciales de inicio de sesión cada vez que quiera usar la aplicación.

Esto se conoce también com inicio de sesión persistente. Afortunadamente, el SDK de Firebase se encarga de esto por nosotros, con todas las preocupaciones de seguridad. El inicio de sesión persistente está activado por defecto en Firebase, así que todo lo que necesitamos es buscar al usuario que inicio sesión actualmente.

Abre el App.js e implementemos la característica de inicio de sesión persistente:

...
import { firebase } from './src/firebase/config'
...

export default function App() {
  ...
  if (loading) {
    return (
      <></>
    )
  }
  
  useEffect(() => {
    const usersRef = firebase.firestore().collection('users)
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        usersRef
          .doc(user.uid)
          .get()
          .then((document) => {
            const userData = document.data()
            setLoading(false)
            setUser(userData)
          })
          .catch((error) => {
            setLoading(false)
          })
      else {
        setLoading(false)
      }
    })
  }, [])
  ...
}

onAuthStateChanged regresa el usuario que inició sesión recientemente. Después buscamos todos los datos extra del usuario que almacenamos en Firestore, y lo ponemos en el estado del componente actual. Esto re-rendizará el componente app, el cual mostrará la pantalla de Inicio.

Nota cómo lo llamamos la primera vez que carga la aplicación al aprovechar el hook useEffect.

8. Escribir y leer datos del Firestore de Firebase

Ya hemos usado Firestore arriba, para guardar información extra de nuestros usuarios (el nombre completo). En esta sección dedicada, vamos a ver cómo podemos escribir los datos a Firestore, y cómo podemos consultarla.

También cubriremos cómo observar (escuchar) los cambios en la colección de Firestore y que se reflejen en la pantalla, en tiempo real. Estos pueden ser muy útiles en aplicaciones de tiempo real, tal como React Native Chat.

Para simplificar, vamos a guardar algunos items de texto en una colección de Firestore llamado "entidades". Considéralos como tareas, posts, tweets, lo que gustes. Crearemos una archivo simple que agrega una nueva entidad y también listaremos todas las entidades que pertenecen al usuario que inició sesión recientemente. Además, la lista será actualizada en tiempo real.

• Implementar HomeScreen.js reescribiéndolo al código de abajo

import React, { useEffect, useState } from 'react'
import { FlatList, Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native'
import styles from './styles'
import { firebase } from '../../firebase/config'

export default function HomeScreen(props) {
  const [entityText, setEntityText] = useState('')
  const [entities, setEntities] = useState([])
  
  const entityRef = firebase.firestore().collection('entities')
  const userID = props.extraData.id
  
  useEffect(() => {
    entityRef
      .where("author ID", "==", userID)
      .orderBy('createdAt', 'desc')
      .onSnapshot(
        querySnapshot => {
          const newEntities = []
          querySnapshot.forEach(doc => {
            const entity = doc.data()
            entity.id = doc.id
            newEntities.push(entity)
          })
          setEntities(newEntities)
        },
        error => {
          console.log(error)
        }
      }
    }, [])
    
    const onAddButtonPress = () => {
      if (entityText && entityText.length > 0) {
        const timestamp = firebase.firestore.FieldValue.serverTimestamp()
        const data = {
          text: entityText,
          authorID: userID,
          createdAt: timestamp,
        }
        entityRef
          .add(data)
          .then(_doc => {
            setEntityText('')
            Keyboard.dismiss()
          })
          .catch((error) => {
            alert(error)
          })
      }
    }
    
    const renderEntity = ({item, index}) => {
      return (
        <View style={styles.entityContainer}>
          <Text style={styles.entityText}>
            {index}. {item.text}
          </Text>
        </View>
      )
    }
    
    return (
      <View style={styles.container}>
        <View style={styles.formContainer}>
          <TextInput
            style={styles.input}
            placeholder="Add new entity"
            placeholderTextColor="#aaa"
            onChangeText={(text) => setEntity(text)}
            value={entityText}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
          />
          <TouchableOpacity style={styles.button} onPress={onAddButtonPress}>
            <Text style={styles.buttonText}>Add</Text>
          </TouchableOpacity>
        </View>
        { entities && (
          <View style={styles.listContainer}>
            <FlatList
              data={entities}
              renderItem={renderEntity}
              keyExtractor={(item) => item.id}
              removeClippedSubviews={true}
            />
          </View>
        )}
      </View>
    )
}

• Estilo de la pantalla inicio, sobreescribiendo HomeScreen/styles.js a:

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  formContainer: {
    flexDirection: 'row',
    height: 80,
    marginTop: 40,
    marginBottom: 20,
    flex: 1,
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 30,
    paddingRight: 30,
    justifyContent: 'center'
    alignItems: 'center'
  },
  input: {
    height: 48,
    borderRadius: 5,
    overflow: 'hidden',
    backgroundColor: 'white',
    paddingLeft: 16,
    flex: 1,
    marginRight: 5
  },
  button: {
    height: 47,
    borderRadius; 5,
    backgroundColor: '#788eec',
    width: 80,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonText: {
    color: 'white',
    fontSize: 16
  },
  listContainer: {
    marginTop: 20,
    padding: 20
  },
  entityContainer: {
    marginTop: 16,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
    paddingBottom: 16
  },
  entityText: {
    fontSize: 20,
    color: '#333'
  }
})

• Recargar la aplicación y observa la nueva pantalla de inicio. Escribe algún texto y presiona el botón Agregar
• Nada sucedió.
• Crea un índice en la colección entidades de Firestore

Notarás que la lista de entidades no se renderiza. Si chequeas los mensajes, verás una advertencias sobre "La consulta requiere un índice", seguido de una URL larga:

Esto nos informa que no podemos consultar la tabla de entidades por authorID y ordenar los datos por createdAt en orden descendente, a menos que creemos un índice. Crear un índice es en realidad realmente fácil – simplemente hacer click en esa URL y luego hacer click en el botón:

• Recarga la aplicación nuevamente

Ahora todo funciona como se espera:

• La aplicación lista todas las entidades en la colección de entidades, en orden de creación descendiente
• Agregar una nueva entidad funciona bien
• La lista se actualiza en tiempo real (intenta eliminar una entrada directamente en la base de datos, o agrega una nueva directamente desdes la aplicación)

Asi es como tu base de datos de Firestore luce ahora:

Así es cómo lees y esribes desde Firestore in React Native. Movámonos a la última sección.

Juega con la aplicación, agregando nuevas entidades. Este es el proyecto final:

Conclusión

Firebase lo hace realmente sencillo al agregar autenticación y soporte de base de datos a cualquier aplicación React Native. El SDK de Firebase es extremadamente poderoso, soportando muchos patrones de base de datos de lectura y escritura.

Además a React Native, el SDK de Firebase provee soporte a muchísimos otros lenguajes, tales como Swift, Kotlin o Flutter. Visita esos links para kits de inicio similares en varios lenguajes.

Hemos exhibido lo más básico en tutorial de React Native Firebase. En la próxima serie, cubriremos características más avanzadas, tales como Firebase Storage (subir archivos) y mostrar notificaciones.

Si te gustó este tutorial, por favor dame una estrella en el repo de Github y compártelo con tu comunidad. Puedes chequear más proyectos gratis de React Native en Instamobile. ¡Saludos!

Una aplicación de calculadora es una aplicación simple que siempre está disponible en todos los dispositivos Android, iOS y de escritorio.

En este artículo, crearemos una aplicación de calculadora utilizando React Native y Expo. Entonces, ¿por qué estamos usando estas herramientas?

React Native es un marco basado en JavaScript que se puede usar para desarrollar aplicaciones móviles en dos sistemas operativos al mismo tiempo: Android e iOS. React Native fue lanzado por primera vez en 2015 por Facebook y es de código abierto.

Puedes encontrar más información sobre React Native aquí.

Expo es un conjunto de herramientas, bibliotecas y servicios que puede usar para simplificar su código React Native. Entonces puede ejecutar aplicaciones React Native en el emulador Expo.

Puedes encontrar más información sobre Expo aquí.

Antes de comenzar a crear una aplicación de calculadora, primero deberás instalar Node.js, React Native y Expo en tu ordenador.

Requisitos previos

1. Instala Node.js: Puedes ver cómo instalarlo aquí.
2. Instala React Native: Puedes ver la documentación de instalación aquí.
3. Instala Expo: Puedes ver la documentación de instalación aquí.

Paso 1: Crear un nuevo proyecto

El primer paso es crear un nuevo proyecto. Usa Expo CLI para crear la base de código React Native con el siguiente comando:

$ expo init calculator-app

Entonces tendrás la opción de iniciar el proyecto que desees. Aquí elegimos la opción en blanco y usamos JavaScript como se muestra a continuación:

Después de eso, el proceso continuará descargando todas las dependencias.

Paso 2: Crear el componente de botón

Cuando desarrolles aplicaciones con React Native, asegúrate de dividir los componentes de la interfaz de usuario en componentes más pequeños para que el código que crees se pueda reutilizar.

Primero, crea una nueva carpeta llamada "componentes" para almacenar el código de tu componente. El primer componente que crearemos es un botón, así que crea un nuevo archivo llamado Button.js. Aquí está el código fuente para el componente Botón:

import { Dimensions, StyleSheet, Text, TouchableOpacity } from "react-native";

export default ({ onPress, text, size, theme }) => {
  const buttonStyles = [styles.button];
  const textStyles = [styles.text];

  if (size === "double") {
    buttonStyles.push(styles.buttonDouble);
  }

  if (theme === "secondary") {
    buttonStyles.push(styles.buttonSecondary);
    textStyles.push(styles.textSecondary);
  } else if (theme === "accent") {
    buttonStyles.push(styles.buttonAccent);
  }

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}>
      <Text style={textStyles}>{text}</Text>
    </TouchableOpacity>
  );
};

Explicación del código:

• En la línea 3, hay cuatro propiedades que necesitamos para hacer este componente Botón: onPress, texto, tamaño y tema.
• Cada una de las propiedades tiene una función como onPress para manejar acciones en los botones.
• El componente de botón que creamos tiene 2 tipos de temas, secundarios y de acento, y 1 tamaño, doble.
• El componente de botón usa el componente React Native predeterminado, TouchableOpacity.

Después de crear el código del componente, no olvides agregar el estilo para este componente de botón. Aquí está el código para el estilo del componente:

// set dimmenstion
const screen = Dimensions.get("window");
const buttonWidth = screen.width / 4;

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#333333",
    flex: 1,
    height: Math.floor(buttonWidth - 10),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Math.floor(buttonWidth),
    margin: 5,
  },
  text: {
    color: "#fff",
    fontSize: 24,
  },
  textSecondary: {
    color: "#060606",
  },
  buttonDouble: {
    width: screen.width / 2 - 10,
    flex: 0,
    alignItems: "flex-start",
    paddingLeft: 40,
  },
  buttonSecondary: {
    backgroundColor: "#a6a6a6",
  },
  buttonAccent: {
    backgroundColor: "#ffc107",
  },
});

Entonces, el código completo de nuestro componente de botón es el siguiente:

import { Dimensions, StyleSheet, Text, TouchableOpacity } from "react-native";

export default ({ onPress, text, size, theme }) => {
  const buttonStyles = [styles.button];
  const textStyles = [styles.text];

  if (size === "double") {
    buttonStyles.push(styles.buttonDouble);
  }

  if (theme === "secondary") {
    buttonStyles.push(styles.buttonSecondary);
    textStyles.push(styles.textSecondary);
  } else if (theme === "accent") {
    buttonStyles.push(styles.buttonAccent);
  }

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}>
      <Text style={textStyles}>{text}</Text>
    </TouchableOpacity>
  );
};

// set dimmenstion
const screen = Dimensions.get("window");
const buttonWidth = screen.width / 4;

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#333333",
    flex: 1,
    height: Math.floor(buttonWidth - 10),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Math.floor(buttonWidth),
    margin: 5,
  },
  text: {
    color: "#fff",
    fontSize: 24,
  },
  textSecondary: {
    color: "#060606",
  },
  buttonDouble: {
    width: screen.width / 2 - 10,
    flex: 0,
    alignItems: "flex-start",
    paddingLeft: 40,
  },
  buttonSecondary: {
    backgroundColor: "#a6a6a6",
  },
  buttonAccent: {
    backgroundColor: "#ffc107",
  },
});

Paso 3: Crear el componente de fila

El siguiente componente que crearemos es un componente Fila. Este componente es útil para crear filas cuando queremos procesar diseños.

Aquí está el código para el componente Fila y su código de estilo:

import { StyleSheet, View } from "react-native";

const Row = ({ children }) => {
  return <View style={styles.container}>{children}</View>;
};

// create styles of Row
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
  },
});

export default Row;

Esto es lo que está pasando:

• En el componente de fila, hay 1 propiedad que necesitamos: Niños.
• El componente de fila usa el componente de vista predeterminado de React Native.
• flexDirection: "fila" en este estilo se usa para hacer que el diseño sea una fila.

Paso 4: Crear la lógica de la calculadora

Crea una nueva carpeta llamada útil y un nuevo archivo calculator.js . Aquí crearemos una función lógica en la aplicación de calculadora que implementaremos más adelante en el archivo App.js. Aquí está el código completo:

export const initialState = {
  currentValue: "0",
  operator: null,
  previousValue: null,
};

export const handleNumber = (value, state) => {
  if (state.currentValue === "0") {
    return { currentValue: `${value}` };
  }

  return {
    currentValue: `${state.currentValue}${value}`,
  };
};

const handleEqual = (state) => {
  const { currentValue, previousValue, operator } = state;

  const current = parseFloat(currentValue);
  const previous = parseFloat(previousValue);
  const resetState = { operator: null, previousValue: null };

  switch (operator) {
    case "+":
      return {
        currentValue: `${previous + current}`,
        ...resetState,
      };
    case "-":
      return {
        currentValue: `${previous - current}`,
        ...resetState,
      };
    case "*":
      return {
        currentValue: `${previous * current}`,
        ...resetState,
      };
    case "/":
      return {
        currentValue: `${previous / current}`,
        ...resetState,
      };

    default:
      return state;
  }
};

// calculator function
const calculator = (type, value, state) => {
  switch (type) {
    case "number":
      return handleNumber(value, state);
    case "clear":
      return initialState;
    case "posneg":
      return {
        currentValue: `${parseFloat(state.currentValue) * -1}`,
      };
    case "percentage":
      return {
        currentValue: `${parseFloat(state.currentValue) * 0.01}`,
      };
    case "operator":
      return {
        operator: value,
        previousValue: state.currentValue,
        currentValue: "0",
      };
    case "equal":
      return handleEqual(state);
    default:
      return state;
  }
};

export default calculator;

Y esto es lo que está pasando:

• initialState se usa para dar el valor predeterminado a nuestra aplicación de calculadora.
• La función handleNumber sirve para devolver el valor de la calculadora y tiene 2 propiedades: valor y estado.
• El identificador de función Equal sirve para procesar el valor establecido de cada operador matemático y devuelve su valor.
• La calculadora de funciones válida cada operador dado. Por ejemplo, si el número llama a la función handleNumber, si está claro, devolverá el valor de estado predeterminado de initiaState, y así sucesivamente.

Paso 5: Refactorizar el archivo App.js

Una vez que hemos creado todos los componentes y el proceso lógico, el siguiente paso es realizar ajustes en el código del archivo App.js. Aquí está el código completo:

import React, { Component } from "react";
import { SafeAreaView, StyleSheet, Text, View } from "react-native";
import Button from "./components/Button";
import Row from "./components/Row";
import calculator, { initialState } from "./util/calculator";

// create class component of App
export default class App extends Component {
  state = initialState;

  // handle tap method
  HandleTap = (type, value) => {
    this.setState((state) => calculator(type, value, state));
  };

  // render method
  render() {
    return (
      <View style={styles.container}>
        {/* Status bae here */}
        <SafeAreaView>
          <Text style={styles.value}>
            {parseFloat(this.state.currentValue).toLocaleString()}
          </Text>

          {/* Do create componentRow */}
          <Row>
            <Button
              text="C"
              theme="secondary"
              onPress={() => this.HandleTap("clear")}
            />

            <Button
              text="+/-"
              theme="secondary"
              onPress={() => this.HandleTap("posneg")}
            />

            <Button
              text="%"
              theme="secondary"
              onPress={() => this.HandleTap("percentage")}
            />

            <Button
              text="/"
              theme="accent"
              onPress={() => this.HandleTap("operator", "/")}
            />
          </Row>

          {/* Number */}
          <Row>
            <Button text="7" onPress={() => this.HandleTap("number", 7)} />
            <Button text="8" onPress={() => this.HandleTap("number", 8)} />
            <Button text="9" onPress={() => this.HandleTap("number", 9)} />
            <Button
              text="X"
              theme="accent"
              onPress={() => this.HandleTap("operator", "*")}
            />
          </Row>

          <Row>
            <Button text="5" onPress={() => this.HandleTap("number", 5)} />
            <Button text="6" onPress={() => this.HandleTap("number", 6)} />
            <Button text="7" onPress={() => this.HandleTap("number", 7)} />
            <Button
              text="-"
              theme="accent"
              onPress={() => this.HandleTap("operator", "-")}
            />
          </Row>

          <Row>
            <Button text="1" onPress={() => this.HandleTap("number", 1)} />
            <Button text="2" onPress={() => this.HandleTap("number", 2)} />
            <Button text="3" onPress={() => this.HandleTap("number", 3)} />
            <Button
              text="+"
              theme="accent"
              onPress={() => this.HandleTap("operator", "+")}
            />
          </Row>

          <Row>
            <Button text="0" onPress={() => this.HandleTap("number", 0)} />
            <Button text="." onPress={() => this.HandleTap("number", ".")} />
            <Button
              text="="
              theme="primary"
              onPress={() => this.HandleTap("equal", "=")}
            />
          </Row>
        </SafeAreaView>
      </View>
    );
  }
}

// create styles of app
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#202020",
    justifyContent: "flex-end",
  },
  value: {
    color: "#fff",
    fontSize: 42,
    textAlign: "right",
    marginRight: 20,
    marginBottom: 10,
  },
});

Algunas notas rápidas:

• handleTap es una función que creamos que tiene como objetivo proporcionar valores de estado y llamar a utils/calculator.
• Aquí llamamos a dos componentes, Botón y Fila, para diseñar la apariencia de la calculadora, como sus números, operaciones matemáticas y el proceso de cálculo.

Paso 6: Ejecuta la aplicación

En este paso intentaremos ejecutar la aplicación de calculadora en el dispositivo o podemos usar un emulador. Aquí uso el simulador de iPhone de MacOS. Ejecuta el siguiente comando para ejecutar el programa:

$ yarn ios

El proceso en ejecución aquí usa Expo como se muestra a continuación:

Si el proceso de compilación está completo, entonces la pantalla de la aplicación de calculadora que programamos será así:

Conclusión

Eso es suficiente para este artículo. Aprendiste sobre estilo, componentes, propiedades y estados en React Native y creaste una aplicación de calculadora funcional.

Si necesitas el código fuente completo, puedes visitar mi repositorio de GitHub aquí: https://github.com/bangadam/calculator-app

¡Gracias por leer!

¡Disponible para un nuevo proyecto! Hablemos.
Correo electrónico: bangadam.dev@gmail.com
Linkedin: https://www.linkedin.com/in/bangadam