3

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.

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.