"undefined is not a function" when create android native module in ReactNative

Question

I'm following ReactNative Native Module Guide to write the java class that can be used in JS side. The exported method is show from class ToastModule(exported as ToastAndroid). The show method is below:

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

All work as expected with the toast button appear when I invoke ToastAndroid.show from Button onPress handler.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  NativeModules,
} from 'react-native';

const ToastAndroid = NativeModules.ToastAndroid

export default class App extends Component {

handleBTNPressed(){
  ToastAndroid.show('Awesome', ToastAndroid.SHORT);
}
render() {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Welcome to React Native!!
      </Text>
      <Button title='click me' onPress={()=>this.handleBTNPressed()}/>
    </View>
  );
 }
}

However, when I further change the function name from

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

to

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

I encounter the following error:"undefined is not a function"

this error shows again if I add a new exported method as following:

@ReactMethod
public void showAgain2(String message, int duration) {
    String mes = "Hi " + message;
    Toast.makeText(getReactApplicationContext(), message, duration).show();
}

Is there anyone know which step I goes incorrectly?

EDIT==========================

There might already be a ToastAndroid in ReactNative, so I change the name to MyToastExample. However, now the error become the following

Does anyone encounter the same issue?

have you run `react-native run-android` after you change the function name? — Harlan, Aug 24 '17 at 03:12
Yes, I have tried that but not work. Even if I keep the `show` method and change the display message for the toast, it won't take effect. — Johnson, Aug 24 '17 at 03:20
I have tried that but not work. Someone mentioned there might already `ToastAndroid` in ReactNative, so I change the name to `MyToastExample`, now the error become "undefined is not an object"(evaluating 'MyToastExample.show') — Johnson, Aug 24 '17 at 04:01
I had the same problem, it looks like a bad link. But the strange is that this is an oficial example. — Daniel Jose Padilla Peña, Apr 12 '18 at 23:16

score 0 · Answer 1 · answered Aug 24 '17 at 05:10

0

In this step, check if you have import the right ToastModule, because ReactNative also have a class Called ToastModule.

Check if this line import com.facebook.react.modules.toast.ToastModule; exist in *ReactPackage.java

answered Aug 24 '17 at 05:10

Harlan

779
4
15

score 0 · Answer 2 · answered Mar 10 '19 at 23:48

Try using `import` instead of `require`.

In my situation, I was using:

var Contacts = require( "react-native-unified-contacts" );

and I was getting the undefined is not function error.

However, changing to:

import Contacts from "react-native-unified-contacts";

fixed the issue for me.

Clearly require and import treat the modules differently.

"undefined is not a function" when create android native module in ReactNative

2 Answers2

Try using import instead of require.

Try using `import` instead of `require`.