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

Question

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..

does it have anything to do with this? github.com/GeekyAnts/NativeBase/issues/851 — MartianMartian
– MartianMartian, Commented Aug 14, 2017 at 14:28

Andru · Accepted Answer · 2016-04-12 17:27:22Z

18

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;

answered Apr 12, 2016 at 17:27

Andru

6,2533 gold badges41 silver badges62 bronze badges

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

Comments

Moritz · Accepted Answer · 2018-03-06 08:58:54Z

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.

Adamski · Accepted Answer · 2016-01-29 14:18:33Z

0

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?

answered Jan 29, 2016 at 14:18

Adamski

3,7456 gold badges44 silver badges79 bronze badges

2 Comments

sbaar Over a year ago

Wow, thanks for pointing this out. The tutorial on native modules uses an RCT prefix, so I would never have thought of this.

Andru Over a year ago

Ran into the same problem.. I added a bit more general answer. You actually don't have to rename your module.

dakoto · Accepted Answer · 2017-07-07 08:19:14Z

0

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.

answered Jul 7, 2017 at 8:19

dakoto

3462 silver badges10 bronze badges

Comments

Aaron Brager · Accepted Answer · 2018-04-26 18:14:28Z

0

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

answered Apr 26, 2018 at 18:14

Aaron Brager

66.4k21 gold badges169 silver badges295 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related