react-native-permissions returning RNPermissions null in react-native expo project

Question

I am new to Expo and I can't tell whats the problem here, I am good enough with Android and that I am trying to use the react-native-qrcode-scanner in a newly created blank react-native expo project. I haven't touched anything inside the project, just created a brand new project and I get an error saying RNPermissions is null. I think its telling to pass details about my android App, can anyone help me with how to start this? I am using react-native-permissions as its needed by the code of QR Code Scanner, I uninstalled everything in dependencies and left only these:

"dependencies": {
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-permissions": "^2.0.2",
    "react-native-web": "~0.11.7"
}

so there is just basic welcome to react message in App.js like this:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { check, PERMISSIONS, RESULTS } from 'react-native-permissions';

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>  
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',     
  },
});
export default App;

THIS is the app.json file:

{
  "expo": {
    "name": "App1",
    "slug": "App1",
    "privacy": "public",
    "sdkVersion": "36.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {  
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    }
  }
}

Answer 1

This package react-native-qrcode-scanner suggests to use react native camera and along with it requires linking. if you are using expo , you wont be able to link as expo doesnt allow linking of libraries. So if you plan to use the same library then first eject from expo to react native and then try with that as you cant access linking libraries.

If you want to implement in expo , then expo has its own barcodescanner , check it out below. expo barcode scanner . it has a beautiful doc. do read it.

Hope it helps. feel free for doubts

Answer 2

Based on what you have shared on App.js, you have not use any of the functions from react-native-permissions

You will need to get permission approval from device owner for using the camera. A few things you probably missing and you want to check the following:

For Android

1. AndroidManifest.xml - whether you have the required permission requested. You may refer to this.

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
    <uses-permission android:name="android.permission.CAMERA" />

2. Make sure you have the library linked

For iOS

1. You need to append the following to your Info.plist

    <key>NSCameraUsageDescription</key>
    <string>Our app need your permission to use your camera phone</string>

2. Make sure you have the library linked
   • Pod install on iOS folder (For React Native >= 0.60) Follow the instruction given here
   • Run react-native link at project root (For React Native <0.60)