10

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
    }
  }
}

2 Answers2

5

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

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45
1

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" />
  1. 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>
  1. Make sure you have the library linked
Tommy Leong
  • 2,509
  • 6
  • 30
  • 54
  • where is the AndroidManifest.xml file in a expo project? this would have been the simple answer but there is no `android/app/src/main/AndroidManifest.xml` folder or file in an expo project, there is not even index.js but I did some digging and found that there are multiple Manifest xml files, each dependency has its own –  Dec 12 '19 at 08:29
  • There are multiple ones, such as `node_modules\expo-permissions\android\src\main\AndroidManifest.xml` and `node_modules\react-native\ReactAndroid\src\main\AndroidManifest.xml` and `node_modules\react-native-permissions\android\src\main\AndroidManifest.xml` –  Dec 12 '19 at 08:30
  • 1
    @AbhishekKumarChowdhury if I'm not mistaken, you are suppose to append the permission in app.json as stated here, under `"permissions": [` https://docs.expo.io/versions/latest/workflow/configuration/#android – Tommy Leong Dec 12 '19 at 08:33
  • @TommyLeong android manifest and info.plist is not available in expo. its in bare react native – Gaurav Roy Dec 12 '19 at 08:35