Agregar Módulos Nativos a Una Aplicación React Native

React Native te permite crear aplicaciones para todo tipo dispositivos móviles utilizando Javascript, esto permite una gran flexibilidad y disminuye la curva de aprendizaje.

React Native permite acceso a diferentes API nativas para los distintos sistemas operativos (Android, iOS), pero en ciertas ocasiones esto no es suficiente y es necesario desarrollar soluciones en código nativo: Java/Kotlin o Object-C/Swift.

Módulos nativos

React Native permite que el uso de código nativo para utilizar el potencial de cada plataforma, es una característica avanzada y que requiere algunos conocimientos más allá de Javascript y React, pero si la plataforma no te ofrece alguna característica que requieres, es posible crearla.

Android

sponsor

El contenido de este sitio es y será siempre gratuito para todos. Ayudame a mantenerlo así convirtiendote en auspiciador.

Tu producto o servicio podría estar aquí

En el caso de Android, el código nativo puede venir distribuido como una paquete jar o aar o creado manualmente como un módulo dentro de tu aplicación.

Quizás necesitas utilizar un SDK o librería externa, en el caso de paquetes jar o aar puedes agregarlos utilizando Android Studio.

1. Abre tu proyecto en Android Studio, abre sólo el directorio android.
2. Haz click en File > New Module
3. Una ventana flotante se mostrará en donde puedes elegir el tipo de módulo que quieres importar, en este caso .JAR/.AAR. Luego presiona siguiente

1. Ahora abre el archivo build.gradle de tu app y agrega una nueva linea al bloque de dependencias:

					
						    dependencies { compile project(":my-library-module") }
					
				

1. Haz click en Sync Project With Gradle Files.

Es posible que tu nuevo módulo ya implemente lo necesarioa para hacer su API disponible en tu proyecto React Native, en caso de no ser así tendras que hacerlo manualmente

Lo primero es crear un nuevo módulo deentro del proyecto, lo llamaremos `SDKModule`

Este nuevo módulo implementa una clase que implementa ReactContextBaseJavaModule

					
						    package com.myapp.sdk;
    
    import com.facebook.react.bridge.Callback;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;
    
    public class SDKModule extends ReactContextBaseJavaModule {
       //constructor
       public SDKModule(ReactApplicationContext reactContext) {
           super(reactContext);
       }
       @Override
       public String getName() {
           return "SDK";
       }
       //Custom function that we are going to export to JS
       @ReactMethod
       public void getDeviceName(Callback cb) {
           try{
               cb.invoke(null, android.os.Build.MODEL);
           }catch (Exception e){
               cb.invoke(e.toString(), null);
           }
       }
    }
					
				

Esta clase debe implementar el método getName. Luego tendrás que agregar los métodos que quieres exponer para su uso en Javascript. Estos métodos deben ser deecorados con la etiqueta @ReactMethod

En este ejemplo el método getDeviceName podrá ser utilizando desde tu código Javascript.

Pero falta un paso más. Es necesario crear un package con el nuevo módulo. Esta nueva clase permitirá el registro del módulo. Para esto bastará con crear un nuevo archivo llamado SDKPackage

					
						    package com.myapp.sdk;
    
    import com.facebook.react.ReactPackage;
    import com.facebook.react.bridge.JavaScriptModule;
    import com.facebook.react.bridge.NativeModule;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.uimanager.ViewManager;
    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.List;
    
    public class SDKPackge implements ReactPackage {
    
       @Override
       public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
    
       @Override
       public List<NativeModule> createNativeModules(
               ReactApplicationContext reactContext) {
           List<NativeModule> modules = new ArrayList<>();
           //We import the module file here
           modules.add(new SDKModule(reactContext));
    
           return modules;
       }
    
       // Backward compatibility
       public List<Class<? extends JavaScriptModule>> createJSModules() {
           return new ArrayList<>();
       }
    }
					
				

Finalmente debemos registrar el paquete en la clase principal MainApplication.java

					
						       import com.notetaker.sdk.SDKPackage;
    
      @Override
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new SDKPackage() //Add your package here
        );
      }
    };
					
				

Listo, ahora tu nuevo módulo estará disponible dentro del objeto NativeModules en tu app React Native, bajo el nombre que definiste en el método getName

					
						    import {NativeModules} from 'react-native';
    NativeModules.SDK.getDeviceName((err ,name) => {
       console.log(err, name);
    });
					
				

Conclusión

React Native es una plataforma que permite el desarrollo rápido y seguro de aplicaciones móviles, pero no tiene soporte (aún) para cada una de las caracterísitcas de los dispositivos o a veces el soporte ofrecido por defecto no es suficiente, en estos casos querrás crear un módulo nativo, que no más que código Java - en el caso de Android - que te permite definir como utilizar cierta característica. Este código puede ser expuesto a tu aplicación Javascript tal como se describe en el ejemplo.

😃 Thanks for reading!

Did you like the content? Found more content like this by joining to the Newsletter or following me on Twitter

⚙️ Edit this on github