androidreactjsreact-nativenative-module

React Native Module (Android) - TypeError: undefined is not an object


I'm trying to work on React Native (Android Module) but I got stuck with this type of error "TypeError: undefined is not an object (evaluating '_ToastExample.default.show')". I actually followed the documentation of React Native in this link https://facebook.github.io/react-native/docs/native-modules-android.

Please see codes below:

// ToastModule.java
package com.reactnativeapp1;

import android.widget.Toast;

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

import java.util.Map;
import java.util.HashMap;

public class ToastModule extends ReactContextBaseJavaModule {

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

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

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

}

// ToastPackage.java
package com.reactnativeapp1;

import com.facebook.react.ReactPackage;
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 ToastPackage implements ReactPackage {

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

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext));
        return modules;
    }

}

// MainActivity.java
package com.reactnativeapp1;

import com.facebook.react.ReactActivity;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.react.ReactPackage;
import com.reactnativeapp1.ToastPackage;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "ReactNativeApp1";
    }

    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ToastPackage()
        ); // Add this line with your package name.
    }
}

// ToastExample.js
import { NativeModules } from 'react-native';
module.exports = NativeModules.ToastExample;

And in my index.js I am trying to call the function public void show(String message, int duration) and I got those undefined errors.

// index.js
import React from 'react';
...
...
...
import ToastExample from './ToastExample';

export default class SampleReactNative extends React.Component {
     componentDidMount() {
          ToastExample.show('Awesome', ToastExample.SHORT);
     }

     ...
     ...
     ...
}

AppRegistry.registerComponent(appName, () => SampleReactNative);

Please I need your help guys.


Solution

  • Change your MainActivity.java code and with default one and add this in MainApplication.java file like this

    import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.
    protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new CustomToastPackage()); // <-- Add this line with your package name.}
    

    Just add these two lines in your MainApplication.java file and it will work.