Modulos nativos para react native!

Verónica Clavijo Altamirano

veuge.clavijo@gmail.com

Veuge_C

Veuge

Veronica Clavijo Altamirano

Objetivos

React native

Curiosidad por explorar Modulos Nativos

android / ios

Explorar como crear librerias para usar en React Native

No nativo

Modulos nativos en framework / otra solucion

React native

Un framework para construir aplicaciones nativas utilizando JavaScript

React native

Codigo Javascript se transforma en código nativo para cada plataforma

React native

Modulos nativos

"Learn once, write anywhere"

NativeModules

Iniciar un proyecto react native

$ npx react-native init {NombreDelProyecto}

1. Settear tu ambiente de desarrollo

https://reactnative.dev/docs/environment-setup

2. Crear una aplicación de React Native

3. Correr la aplicación

$ npm start

3. Correr la aplicación

$ npm run android

$ npm run ios

1

CREAR un archivo de módulo nativo personalizado

2

EXPORTAR un metodo nativo a Javascript!

3

REGISTRAR el modulo dentro de un PACKAGE

5

IMPORTAR Y UTILIZAR el modulo nativo en el entorno de React Native!

4

REGISTRAR el PACKAGE dentro del MainApplication.java

6

DIVERTIRSE

RECETA ANDROID

1. CREAR un archivo de módulo nativo

// MyNativeModule.java
package com.mdevconf;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;

public class MyNativeModule extends ReactContextBaseJavaModule {
    MyNativeModule(ReactApplicationContext context) {
        super(context);
    }

    @NonNull
    @Override
    public String getName() {
        return "MyNativeModule";
    }
}

2. EXPORTAR un metodo nativo a Javascript!

// MyNativeModule.java
package com.mdevconf;

import android.util.Log;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyNativeModule extends ReactContextBaseJavaModule {
    MyNativeModule(ReactApplicationContext context) {
        super(context);
    }

    @NonNull
    @Override
    public String getName() {
        return "MyNativeModule";
    }

    @ReactMethod
    public void simpleLogger() {
        Log.d("MyNativeModule", "Log desde la el modulo nativo!");
    }
}

3. REGISTRAR el modulo dentro de un PACKAGE

// MyNativePackage.java
// import statements....

public class MyNativePackage implements ReactPackage {

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(
    	@NonNull ReactApplicationContext reactContext
    ) {
        return Collections.emptyList();
    }

    @NonNull
    @Override
    public List<NativeModule> createNativeModules(
    	@NonNull ReactApplicationContext reactContext
    ) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new MyNativeModule(reactContext));

        return modules;
    }

}

4. REGISTRAR el PACKAGE

// MainApplication.java



public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        .......

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new MyNativePackage());
          return packages;
        }

        .......
      };

  .....
}

5. IMPORTAR Y UTILIZAR en React Native!

// App.js

import {
  ...
  NativeModules,
  ...
} from 'react-native';

const {MyNativeModule} = NativeModules;

const App = () => {
  const onPressButton = () => {
    console.log('Este es un log desde javascript');
    MyNativeModule.simpleLogger();
  };

  return (
    <SafeAreaView>
      <StatusBar barStyle={'light-content'} />
      <View style={styles.container}>
        <Text style={styles.text}>Hello MDevConf!</Text>
        <Button title="Click me" onPress={onPressButton} />
      </View>
    </SafeAreaView>
  );
};

Ejemplo simplista

6. Divertirse!

Ejemplo de la vida real....

Recomendar al usuario que actualice su versión de nuestra app.

SEGUIR EXPLORANDO

https://github.com/Veuge/MDevConf