CODEWITHSUNDEEP
iosobjective-creact-native
Adamski
Adamski

Reputation: 3665

"'undefined' is not an object" from Native Module in React Native

I am getting the following error when trying to invoke a method in a Native Module:

'undefined' is not an object (evaluating 'ScaleController. updateScaleFromJSON')

My native module Objective-C files -

RCTScaleController.h:

#ifndef RCTScaleController_h
#define RCTScaleController_h

#import "RCTBridgeModule.h"

@interface RCTScaleController : NSObject <RCTBridgeModule>
@end

#endif /* RCTScaleController_h */

RCTScaleController.mm:

#import "RCTScaleController.h"
#import "ScaleControllerObjC.h"
#import "RCTLog.h"

@implementation RCTScaleController

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(updateScaleFromJSON:(NSString *)jsonString)
{
    RCTLogInfo(@"About to send json: %@", jsonString);
    ScaleControllerObjC *scaleController = [[ScaleControllerObjC alloc] init];
    [scaleController updateScaleFromJSON:jsonString];
}

Here it is being required in my JS file:

var ScaleController = require('react-native').NativeModules.RCTScaleController;

And here it is being invoked causing the error:

ScaleController.updateScaleFromJSON (JSON.stringify (scale));

I've followed the examples I've seen and not sure whats wrong here..

Upvotes: 6

Views: 13924

Answers (5)

Aaron Brager
Aaron Brager

Reputation: 66242

This error can also occur if you import the native module incorrectly into another JavaScript file. For example if you are importing the native module like so:

// ScaleControllerNativeModule.js

import { NativeModules } from 'react-native';
module.exports = NativeModules.ScaleController;

And you import it using a named import:

import { ScaleController } from './ScaleControllerNativeModule';

You'll get the "undefined is not an object" error.

Instead, use the default import (without the {}), e.g.:

import ScaleController from './ScaleControllerNativeModule';

Upvotes: 0

Moritz
Moritz

Reputation: 21

I ran into this issue for a long time adding React Native to an existing android app. My problem was that, integrating React Native, the guide on creating native modules did not mention that the package needs to be declared in the ReactInstanceManager instance in this scenario, not in the main Application file. For Android, the instance declaration would look like so (probably analogous for iOS): 

ReactInstanceManager.builder()
            .setApplication(application)
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .addPackage(new MyTestPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();

This can be hard to spot, especially when using Dependency injection :).

I created a request for a doc update here.

Upvotes: 1

dakoto
dakoto

Reputation: 346

For anyone in the future who comes across this issue and thinks that this error is a result of the native libraries not being linked properly during build time: Follow Step 2 on the manual installation instruction of linking libraries

Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag the static library from the Products folder inside the Library you are importing to Link Binary With Libraries

the idea is to make sure that the custom native library is included when building the native libraries used by react-native.

Upvotes: 0

Andru
Andru

Reputation: 6184

Generally if a module is prefixed by RCT, in NativeModules it will only be the substring after it, so you don't have to rename your entire module, just call it differently from NativeModules.

Example:

So e.g. in the case of Android if your getName() function does return a name like "RCTMyName":

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

then back in Javascript, you have to call it without RCT, i.e. just MyName:

import { NativeModules } from 'react-native';
export default NativeModules.MyName;

Upvotes: 18

Adamski
Adamski

Reputation: 3665

Strangely, this problem was solved by renaming the module from RCTScaleController to ReactScaleController.

Anyone know why? Something about RCT being the prefix for internal React modules?

Upvotes: 0

Related Questions