I can't see any iOS Native Module in JS

Question

I have some experience with React but I'm new to React Native. I've played around for a while, but I got stuck when I tried to write a basic native module for iOS. I've tried with both Swift and Objective C. (I have some basic experience with Swift, but Objective C is completely new for me)

Some context:

1. The project is created with react-native-cli 2.0.1
2. I use XCode 9.1

Here is the .swift class

import Foundation

@objc(Something)
class Something: NSObject {

  @objc
  func printSomething() -> Void {
    print("Something")
  }
}

Here is the bridge file

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(Something, NSObject)

RCT_EXTERN_METHOD(printSomething)

@end

And the Project-Brigding-Header.h

//
//  Use this file to import your target's public headers that you would like to expose to Swift.
//

#import <React/RCTBridgeModule.h>

My App.js file

...
import { NativeModules } from 'react-native';
...
type Props = {};
export default class App extends Component<Props> {
  componentDidMount() {
    console.log('NativeModules: ', NativeModules);
  }
...
}

Here is the problem. The output of console.log() says NativeModules is an empty object:

2018-02-22 18:19:04.590 [info][tid:com.facebook.react.JavaScript] 'NativeModules', {}
2018-02-22 18:19:04.589970+0200 velimo_app_rn[14748:400982] 'NativeModules', {}

I don't understand what I'm doing wrong. I've read pretty much everything I could find only related to the topic but I can't see what I do wrong. If you have any suggestion, please let me know. Thanks!

Spreadeagle

Only thing I can think of is perhaps somehow these files aren't being compiled. Double check that they are included in Compile Sources phase in Build Phases – Clarence

Have you rebuilt the project? You can't just refresh using cmd + R if you've modified Native code. – Complaisant

@Complaisant yes, many times. I’m aware of that. – Spreadeagle

@HunaidHassan thank you, I will check. – Spreadeagle

@HunaidHassan I've just checked. I can see the swift class and the bridge in Compile Sources – Spreadeagle

@HunaidHassan - You should have posted that as an answer, so that I can upvote the hell out of it. You just solved my half-day headbanging – Greyson

Answer 1

The solution was to log the module name console.log(NativeModules.Something), not the whole NativeModules object. It wasn't anything wrong with my setup.

Spreadeagle

It should have still appeared if you console logged NativeModules. When you did your native code, did you restart the React Native packager and re-run react-native run-ios? – Geldens

@Geldens yes, I've done it many times. I really don't get it why it doesn't show up – Spreadeagle

Answer 2

If you made changes to the native iOS code, then you need to rebuild the project by rerunning npx react-native run-ios and restart the server npx react-native start.

I also relaunched the app in the simulator.

Tactful