skip to Main Content

I am facing this error while starting react native android app.
Error: react-native-permissions: NativeModule.RNPermissions is null. To fix this issue try these steps: • If you are using CocoaPods on iOS, run pod installin theios directory and then clean, rebuild and re-run the app. You may also need to re-open Xcode to get the new pods. • If you are getting this error while unit testing you need to mock the native module. You can use this to get started: https://github.com/react-native-community/react-native-permissions/blob/master/mock.js If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-permissions

I have followed the steps mentioned in the error body no luck.
steps I followed:

  1. pod install
  2. clean and rebuild the app
  3. npx react-native-clean-project

My pod file:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
# pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone.podspec"
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
platform :ios, '11.0'

target 'BayQi' do
  pod 'react-native-contacts', :path => '../node_modules/react-native-contacts'
  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path
  pod 'GoogleMaps'
  pod 'Google-Maps-iOS-Utils'
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])



  target 'BayQiTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  # use_flipper!
  # post_install do |installer|
  #   flipper_post_install(installer)
  # end
end

target 'BayQi-tvOS' do
  # Pods for BayQi-tvOS

  target 'BayQi-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

3

Answers


  1. After spending two days debugging react-native-permissions, I found my issue was with react-native-qrcode-scanner.

    It had "react-native-permissions": "^2.0.2" in it’s dependencies but the current version is "react-native-permissions": "^3.8.0".

    This version of react-native-permissions (3.8.0) has breaking changes.

    Quick fix

    1. Install react-native-permissions and follow the installation instructions.
    2. Delete node_modules/react-native-qrcode-scanner/node_modules/react-native-permissions because it installs the deprecated 2.0.2. (You’ll need to do this each time you clear your node_modules)

    In your case, you’ll need to find the library which installs react-native-permissions as a dependency and then delete node_modules/*specific-library*/node_modules/react-native-permissions

    https://github.com/moaazsidat/react-native-qrcode-scanner/issues/403

    Login or Signup to reply.
  2. This is because react-native-qrcode-scanner uses the old version react-native-permissions. One of the typical solutions for such a case is to override dependencies. Override the react-native-permissions dependency for react-native-qrcode-scanner. For npm we need to use overrides, and for resolutions for yarn.

    So for this code works just delete node_modules folder, yarn.lock file, and add this code to package.json

      "resolutions": {
        "react-native-permissions": "^3.8.0"
      },
      "overrides": {
        "react-native-qrcode-scanner": {
          "react-native-permissions": "^3.8.0"
        }
      },
    

    Than run yarn or npm imstall.
    My package.json looks like this:

      "dependencies": {
    ...
        "react": "18.2.0",
        "react-native": "0.71.4",
    ...
        "react-native-permissions": "^3.8.0",
        "react-native-qrcode-scanner": "^1.5.5",
    ...
      },
    ...
      "resolutions": {
        "react-native-permissions": "^3.8.0"
      },
      "overrides": {
        "react-native-qrcode-scanner": {
          "react-native-permissions": "^3.8.0"
        }
      },
    

    With yarn this package.json works well.

    Login or Signup to reply.
  3. I fixed it with following steps

    change your react-native-permissions version from 3.8.0 to 2.0.2 in package.json file considering an open issue in the library, reference – https://github.com/moaazsidat/react-native-qrcode-scanner/issues/411.

    add following to the Podfile

    permissions_path = '../node_modules/react-native-permissions/ios'
    pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
    

    Don’t forget to add .podspec at the end, remember this is an older version of react-native-permissions.

    add these to Info.plist file

    <key>NSCameraUsageDescription</key>
    <string>Our app need your permission to use your camera phone</string>
    <!-- Include this only if you are planning to use the camera roll -->
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Your message to user when the photo library is accessed for the first time</string>
    

    Make sure you have react-native-camera package added for the camera to be working.

    Now run npm install and pod install from ios folder.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search