Making a ToastModule for Android in React Native

In this blog, I am implementing ToastModule functions and how to use those functions in our React Native Application.

In my previous blog,  we know that how to create a React native Library and how to import in our Existing Application? Now, I am lighting my previous blog for What is the Module?

The module is a very important thing in our development, By using module we split our problems into many parts or we can generalize our problems into a specific form.  In this blog, I will focus on how to create a module in the react-native project and how to implement it on our existing project manually.

 How to create a Module? 

-> Please click on the link to open my previous blog to create a module

https://mobikul.com/creating-module-for-react-native/

Now create functions for Toast module-

Steps-

• Create your ToastModule class in your package which is extends “ReactContextBaseJavaModule” for eg. MobikulToastModule and your package name – com.reactlibrary check the following snippet
  
  package com.reactlibrary; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.facebook.react.bridge.Callback; import java.util.HashMap; import java.util.Map; import es.dmoral.toasty.Toasty; public class MobikulToastModule extends ReactContextBaseJavaModule { private final ReactApplicationContext reactContext; private static final String DURATION_SHORT_KEY = "SHORT"; private static final String DURATION_LONG_KEY = "LONG"; public MobikulToastModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  package com.reactlibrary;   import android.widget.Toast;   import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.facebook.react.bridge.Callback;   import java.util.HashMap; import java.util.Map;   import es.dmoral.toasty.Toasty;   public class MobikulToastModule extends ReactContextBaseJavaModule {       private final ReactApplicationContext reactContext;     private static final String DURATION_SHORT_KEY = "SHORT";     private static final String DURATION_LONG_KEY = "LONG";       public MobikulToastModule(ReactApplicationContext reactContext) {         super(reactContext);         this.reactContext = reactContext;     } }

  
   

• ReactContextBaseJavaModule require a method called getName.  The purpose of this method is to return the string name of the NativeModule which represents this class in JavaScript.

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

  1 2 3 4

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

   

• An optional method called getConstants returns the constant values exposed to JavaScript. Its implementation is not required but is very useful to key pre-defined values that need to be communicated from JavaScript to Java in sync.

  @Override public Map<String, Object> getConstants() { final Map<String, Object> constants = new HashMap<>(); constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT); constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG); return constants; }

  1 2 3 4 5 6 7

  @Override   public Map<String, Object> getConstants() {     final Map<String, Object> constants = new HashMap<>();     constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);     constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);     return constants;   }

   

• To expose a method to JavaScript a Java method must be annotated using @ReactMethod. The return type of bridge methods is always void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).
  @ReactMethod public void show(String message, int duration) { Toast.makeText(getReactApplicationContext(), message, duration).show(); } @ReactMethod public void success(String message, int duration) { Toasty.success(getReactApplicationContext(),message, duration, true).show(); }

  1 2 3 4 5 6 7 8

  @ReactMethod     public void show(String message, int duration) {         Toast.makeText(getReactApplicationContext(), message, duration).show();     }     @ReactMethod     public void success(String message, int duration) {         Toasty.success(getReactApplicationContext(),message, duration, true).show();     }

  Argument Types for the function-

  Boolean -> Bool Integer -> Number Double -> Number Float -> Number String -> String Callback -> function ReadableMap -> Object ReadableArray -> Array

  1 2 3 4 5 6 7 8

  Boolean -> Bool Integer -> Number Double -> Number Float -> Number String -> String Callback -> function ReadableMap -> Object ReadableArray -> Array

   

Register the Module

The last step within Java is to register the Module; this happens in the createNativeModules of our app’s package. If a module is not registered it will not be available from JavaScript

• Create MobikulToastPackage  Java class inside the module package name com.reactlibrary 

  package com.reactlibrary; import java.util.Arrays; import java.util.Collections; import java.util.List; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import com.facebook.react.bridge.JavaScriptModule; public class MobikulToastPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { return Arrays.<NativeModule>asList(new MobikulToastModule(reactContext)); } public List<Class<? extends JavaScriptModule>> createJSModules() { return null; } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

  package com.reactlibrary;   import java.util.Arrays; import java.util.Collections; import java.util.List;   import com.facebook.react.ReactPackage; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import com.facebook.react.bridge.JavaScriptModule;   public class MobikulToastPackage implements ReactPackage {     @Override     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {         return Arrays.<NativeModule>asList(new MobikulToastModule(reactContext));     }       public List<Class<? extends JavaScriptModule>> createJSModules() {         return null;     }       @Override     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {         return Collections.emptyList();     } }

   

Now Add this module in your Project in MainApplicaiton.java class

Use MobikulToast in our project javascript class

• import module
  
  import MobikulToast from 'react-native-mobikul-toast'

  1	import MobikulToast from 'react-native-mobikul-toast'

  
   
• call methods
  
  MobikulToast.success(msg, MobikulToast.SHORT)

  1	MobikulToast.success(msg, MobikulToast.SHORT)

  
   

References-

https://facebook.github.io/react-native/docs/native-modules-android