Making a ToastModule for Android in React Native

ashwini gupta

6 March 2021

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;
    }
}

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;
  }

@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();
    }

@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

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();
    }
}

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

package com.myproject;

import com.reactlibrary;

import com.facebook.react.ReactPackage;

import java.util.ArrayList;
import java.util.List;

public class MainApplication {

    protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
//        List<ReactPackage> packages = new PackageList(this).getPackages();
                List<ReactPackage> packages = new ArrayList<ReactPackage>();
        // Packages that cannot be autolinked yet can be added manually here, for example:
        // packages.add(new MyReactNativePackage());
        packages.add(new MobikulToastPackage()); // <-- Add this line with your package name.
        return packages;
    }


}

package com.myproject;

import com.reactlibrary;

import com.facebook.react.ReactPackage;

import java.util.ArrayList;

import java.util.List;

public class MainApplication {

protected List<ReactPackage> getPackages() {

@SuppressWarnings("UnnecessaryLocalVariable")

// List<ReactPackage> packages = new PackageList(this).getPackages();

List<ReactPackage> packages = new ArrayList<ReactPackage>();

// Packages that cannot be autolinked yet can be added manually here, for example:

// packages.add(new MyReactNativePackage());

packages.add(new MobikulToastPackage()); // <-- Add this line with your package name.

return packages;

}

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