Search code examples
typescriptreact-nativeexponode-modulesyarnpkg

React-Native: What can cause a module to be null?


i'm working on a react native project with expo and yarn and needed to install a new dependency to get device manufacturer (it's react-native-device-info if you are wondering). I installed it successfully, implemented it in my code, but upon opening the app with expo go i was shown an error message

@React-native-community/react-native-device-info: NativeModule.RNDeviceInfo is null. To fix this issue follow these steps: *useless steps*

Looking up in the github repo i found lots issues addressing this (and the developer answering it was not his problem because it worked on his example). From what i understood that error is his corresponding of Native module cannot be null. So my question is: how can it be that a Native module is null? What might be the cause?

I wanted to solve this problem myself, but having no knowledge of how this error is brought up or how native modules work i don't even know where to start. I read that it could be a linking problem, but RN versions over 0.59 should have autolinking and even manual linking didn't help. Even reinstalling everything didn't help. Searching through his code i found the piece of code i will leave down here, that is the exact place where the error is triggered, but i have no idea of how we get there.

File: nativeinterface.ts

    import { Platform, NativeModules } from 'react-native';
import { DeviceInfoNativeModule } from './privateTypes';

let RNDeviceInfo: DeviceInfoNativeModule | undefined = NativeModules.RNDeviceInfo;

// @ts-ignore
if (Platform.OS === 'web' || Platform.OS === 'dom') {
  RNDeviceInfo = require('../web');
}

if (!RNDeviceInfo) {
  // Produce an error if we don't have the native module
  if (
    Platform.OS === 'android' ||
    Platform.OS === 'ios' ||
    Platform.OS === 'web' ||
    // @ts-ignore
    Platform.OS === 'dom'
  ) {
    throw new Error(`@react-native-community/react-native-device-info: NativeModule.RNDeviceInfo is null. To fix this issue try these steps:
  • For react-native <= 0.59: Run \`react-native link react-native-device-info\` in the project root.
  • Rebuild and re-run the app.
  • If you are using CocoaPods on iOS, run \`pod install\` in the \`ios\` directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods.
  If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-device-info`);
  }
}

export default RNDeviceInfo as DeviceInfoNativeModule;

Let me know if you need additional information or if i'm getting something wrong.

versions:

React Native => 0.62.2
expo => 38
react-native-device-info => 6.0.0
yarn => 1.22.5

Solution

  • After a lot of wasted time looking each and one of the 47 github issues on this error (I would ask myself a couple of questions) I finally found out that the problem is nothing other than that expo doesn't support new native modules. In my specific example I could install expo-device to achieve the same result as react-native-device-info. But if expo doesn't have a module for what you need you will have to drop it i'm afraid.