NativeModules is null, breaking app

[nandorojo]

Version

1.0.7

Platform

iOS

OS version

iOS 13

Steps to reproduce

1. Go through entire set up for iOS
2. Write Beacons.requestWhenInUseAuthorization()
3. yarn ios --device

Example code:

import React, { useEffect } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import Beacons from 'react-native-beacons-manager'

export default function NewExample() {
	useEffect(() => {
		Beacons.requestWhenInUseAuthorization()
	}, [])
	return (
		<View />
	)
}

Expected behavior

The app should run and request permissions.

Actual behavior

I opened new.module.ios.js and added a console.log:

It appears that NativeModules is being imported as null. I'm not exactly sure why that's the case. This is my package.json for my Expo SDK36 detached example app:

{
  "scripts": {
    "postinstall": "jetify",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "deprecated-react-native-listview": "^0.0.6",
    "expo": "~36.0.0",
    "moment": "^2.24.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.4",
    "react-native-beacons-manager": "^1.0.7",
    "react-native-bluetooth-state": "^2.0.0",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-screens": "~2.0.0-alpha.12",
    "react-native-unimodules": "~0.7.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@types/babel__core": "^7.1.3",
    "@types/react": "^16.9.17",
    "@types/react-native": "^0.60.27",
    "@typescript-eslint/eslint-plugin": "^2.14.0",
    "@typescript-eslint/parser": "^2.14.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^2.3.0",
    "prettier": "^1.19.1",
    "typescript": "^3.7.4"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

When I log NativeModules in App.js, I see a dictionary:

import React, { useEffect } from 'react'
import { View, Text, StyleSheet, NativeModules } from 'react-native'
import Beacons from 'react-native-beacons-manager'

console.log(NativeModules) // 👋<-- this logs {}

export default function NewExample() {
	useEffect(() => {
		Beacons.requestWhenInUseAuthorization()
	}, [])
	return (
		<View />
	)
}

[nandorojo]

I've been exploring this for a while. I haven't solved it yet, but I tried many things so I figured I'd chronicle the experience below.

I tried cd ios && pod install and got this message:

[!] use_native_modules! skipped the react-native dependency 'react-native-beacons-manager'. No podspec file was found.
    - Check to see if there is an updated version that contains the necessary podspec file
    - Contact the library maintainers or send them a PR to add a podspec. The react-native-webview podspec is a good example of a package.json driven podspec. See https://github.com/react-native-community/react-native-webview/blob/master/react-native-webview.podspec
    - If necessary, you can disable autolinking for the dependency and link it manually. See https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#how-can-i-disable-autolinking-for-unsupported-library

Okay, so I then tried doing adding a react-native.config.js file at the root of my project:

// react-native.config.js
module.exports = {
	dependencies: {
	  'react-native-beacons-manager': {
		platforms: {
		  ios: null, // disable ios platform, other platforms will still autolink if provided
		},
	  },
	},
  };

I then did pod install once more.

Did that fix it? Sadly, no. Suddenly a new problem; I'm running into #92 where it says React/RCTBridge.h not found.

The PR for #92 is #114. Taking a look at my node_modules, it appears that this PR may not have been published to npm, because the .podspec file is not there.

I manually added ReactNativeBeaconsManager.podspec to the npm_modules/react-native-beacons-manager folder with the following contents:

Pod::Spec.new do |s|
	s.name         = "ReactNativeBeaconsManager"
	s.version      = "1.1.0"
	s.summary      = "React-Native library for detecting beacons (iOS and Android)"
	s.homepage     = "https://github.com/MacKentoch/react-native-beacons-manager#readme"
	s.license      = { :type => "MIT" }
	s.authors      = { "" => "" }
	s.platform     = :ios, "8.0"
	s.source       = { :path => "." }
	s.source_files = "ios", "ios/**/*.{h,m}"
  
	s.dependency 'React'
  end

I then ran react-native run-ios once more. Almost built, but an error once again: missing dependency. So I once more tried cd ios && pod install, but running it had no success.

I then tried to build in XCode, and the process gets so far, only to fail with the same error once again:

'React/RCTBridgeModule.h' file not found

Next attempt

# directly install from git repo
yarn add https://github.com/MacKentoch/react-native-beacons-manager

└─ [email protected] installed

I also tried doing the steps for getting react set up from this StackOverflow post. That seems to have solved the RCT file not being found.

It would appear that 1.0.7 is the latest version on npm, so installing 1.1.0 directly from the repo helped! Woohoo!

So I clicked run in XCode...

Now, the next bug that appeared after trying to run from XCode:

Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_ESSBeaconScanner", referenced from:
      objc-class-ref in libReactNativeBeaconsManager.a(RNiBeacon.o)
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

I solved this by following this answer and changing my valid architechure to armv7, armv7s. It seems to have made that error non-breaking.

Not exactly sure what this means, but I'll roll with it.

I clicked run from XCode on my remote device once again. Finally, it runs on my phone and opens the app. I get a new error, but this time on the JS side. That's progress.

Native module cannot be null.

I checked the corresponding file in node_modules/react-native-beacons-manager/lib/new.module.ios.js, and logged native modules to the console in line 10:

This is the corresponding log for my NativeModules:

It looks like RNiBeacon is missing. Still, this is progress. My original post had NativeModules logging as null altogether. It seems like the only missing piece is getting RNiBeacon to show up.

Now that the .podspec file is added, I'll try this:

react-native unlink react-native-beacons-manager

And

react-native run-ios --device

Now I get this error. I'll try to solve it soon and see if I can get it up and running.

[sankar9659]

Have you fixed this issue?

[nandorojo]

I eventually gave up and moved on to using @estimote/react-native-proximity with estimote beacons. If you can go through the steps I did above, you might get closer to solving this bug. It seemed like it was close...

[sankar9659]

Try this link its working for me, https://github.com/MacKentoch/react-native-beacons-manager/issues/149#issuecomment-553488736

[TheVannysher]

I did the same as @sankar9659 (https://github.com/MacKentoch/react-native-beacons-manager/issues/149#issuecomment-553488736) and used https instead of git to get it working for me