Permission-Camera - Definition of 'RNPermissionHandlerCamera' must be imported from module 'RNPermissions.RNPermissionHandlerCamera' before it is required

[ahmetcangurel]

Bug summary

Hi, i m trying setup react-native-qrcode-scanner.

podfile:

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

config = use_native_modules!

Flags change depending on the env values.

flags = get_default_flags()

use_react_native!(
:path => config[:reactNativePath],
`

info.plist
<key>NSCameraUsageDescription</key> <string>$(PRODUCT_NAME) needs access to your camera</string> <key>NSMicrophoneUsageDescription</key> <string>$(PRODUCT_NAME) needs access to your Microphone.</string> <key>NSPhotoLibraryUsageDescription</key> <string>$(PRODUCT_NAME) needs access to your photo library</string>

package.json
`
{
"name": "some",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"postinstall": "react-native setup-ios-permissions && pod-install",
"svgr": "svgr ./src/Assets/icons -d ./src/Components/icons --native --icon --svg-props fill=currentColor,width={props.size},height={props.size}"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.17.12",
"@react-native-firebase/app": "^17.4.0",
"@react-native-firebase/auth": "^17.4.0",
"@react-native-firebase/messaging": "^17.4.1",
"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"axios": "^1.3.4",
"deprecated-react-native-prop-types": "^4.0.0",
"firebase": "^9.18.0",
"lottie-react-native": "^5.1.5",
"react": "18.2.0",
"react-native": "^0.71.6",
"react-native-camera": "^4.2.1",
"react-native-controlled-mentions": "^2.2.5",
"react-native-device-info": "^10.6.0",
"react-native-gesture-bottom-sheet": "^1.1.0",
"react-native-gesture-handler": "^2.9.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-permissions": "^3.8.0",
"react-native-qrcode-scanner": "^1.5.5",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.20.0",
"react-native-select-dropdown": "^3.3.2",
"react-native-svg": "^13.9.0",
"react-native-vector-icons": "^9.2.0",
"react-redux": "^8.0.5",
"redux": "^4.2.1"
},
"reactNativePermissionsIOS": [
"AppTrackingTransparency",
"BluetoothPeripheral",
"Calendars",
"Camera",
"Contacts",
"FaceID",
"LocationAccuracy",
"LocationAlways",
"LocationWhenInUse",
"MediaLibrary",
"Microphone",
"Motion",
"Notifications",
"PhotoLibrary",
"PhotoLibraryAddOnly",
"Reminders",
"Siri",
"SpeechRecognition",
"StoreKit"
],
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.21.0",
"@react-native-community/eslint-config": "^3.2.0",
"@svgr/cli": "^6.5.1",
"@svgr/core": "^6.5.1",
"@tsconfig/react-native": "^2.0.2",
"@types/jest": "^29.2.1",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.8",
"pod-install": "^0.1.38",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"jest": {
"preset": "react-native"
}
}

`

use
<QRCodeScanner onRead={(e) => selectFunction(e)} reactivate={true} reactivateTimeout={3000} showMarker={true} markerStyle={{ borderColor: Colors.primary }} />

Library version

3.8.0

Environment info

"react-native": "^0.71.6"

Steps to reproduce

1. npm install react-native-camera --save
2. npm install react-native-qrcode-scanner --save
3. npm install react-native-permissions --save
4. add configures for podfile and info.plist
5. npm install && pod install

Reproducible sample code

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

[zoontek]

Don't link the handler twice. Here you're installing it using Podfile (legacy method) AND package.json (new method).

Remove it from your Podfile:

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

See https://github.com/zoontek/react-native-permissions/releases/tag/3.7.0

[ahmetcangurel]

but this time "cannot read property 'request' of undefined" error :/

`
import React, { useEffect, useState } from 'react'
import { Alert, Platform, SafeAreaView, View } from 'react-native'
import Header from '../../Components/Header/Header'
import Colors from '../../Assets/Colors'
import styles from './QRScreen.Style'

import axios from 'axios'
import auth from '@react-native-firebase/auth'

import QRCodeScanner from 'react-native-qrcode-scanner'
import {request, PERMISSIONS} from 'react-native-permissions';

const QRScreen = ({ navigation, route }) => {
const stack = route.params?.stack
const id = route.params?.id

console.log(stack, id)

const onReadQR = async (e) => {
    console.log(e.data)
    const idTokenResult = await auth().currentUser.getIdTokenResult()
    await axios.get(e.data, {
        headers: {
            "Authorization": idTokenResult.token
        }
    }).then((res) => {
        console.log('başarılı', res.data)
        navigation.navigate('Note', { noteID: res.data.result.id })
    }).catch((err) => {
        console.log(err)
    })
}

const addNewMessage = async (e) => {
    const idTokenResult = await auth().currentUser.getIdTokenResult()
    console.log(e.data)
    await axios.get(e.data, {
        headers: {
            "Authorization": idTokenResult.token
        }
    }).then((res) => {
        console.log(res.data)
        if (res?.data?.result?.id == id) {
            navigation.navigate('NewNote')
        } else {
            Alert.alert('Hata', 'Lütfen doğru QR Kodu okuttuğunuzdan emin olun.', [{ text: 'Tamam' }])
        }
    }).catch((err) => {
        console.log(err)
    })
}

const selectFunction = (e) => {
    if (stack != undefined && id != undefined) {
        addNewMessage(e)
    } else {
        onReadQR(e)
    }
}

useEffect(() => {
    if (Platform.OS === 'ios') {
        request(PERMISSIONS.IOS.CAMERA).then((result) => {
            console.log(result);
        });
    }

}, [])

return (
    <SafeAreaView style={styles.container}>
        {stack ? (
            <Header
                title='QR Okut'
                goBack={() => navigation.goBack()}
            />
        ) : (
            <Header
                title='QR Okut'
            />
        )}
        <View style={{ marginTop: 100 }}>
            <QRCodeScanner
                onRead={(e) => onReadQR(e)}
                reactivate={true}
                reactivateTimeout={3000}
                showMarker={true}
                markerStyle={{ borderColor: Colors.primary }}
            />
        </View>
    </SafeAreaView>
)

}

export default QRScreen
`

this is

[zoontek]

Clean your project.

[ahmetcangurel]

this time. not working ios side

[ahmetcangurel]

` ERROR TypeError: Cannot read property 'request' of undefined

This error is located at:
in QRCodeScanner (created by QRScreen)
in RCTView (created by View)
in View (created by QRScreen)
in RCTSafeAreaView (created by QRScreen)
in QRScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenNavigationContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by Navigation)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by Navigation)
in Navigation (created by App)
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in mtag(RootComponent), js engine: hermes
ERROR TypeError: Cannot read property 'request' of undefined

This error is located at:
in QRCodeScanner (created by QRScreen)
in RCTView (created by View)
in View (created by QRScreen)
in RCTSafeAreaView (created by QRScreen)
in QRScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenNavigationContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by Navigation)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by Navigation)
in Navigation (created by App)
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in mtag(RootComponent), js engine: hermes
LOG granted`

[verybluebot]

@ahmetcangurel having the same issue.
You are missing some setup steps, but for me doing those
still resolves with ERROR TypeError: Cannot read property 'request' of undefined

In any case those are the missing steps:

• Add to your package.json the permissions you need

  "reactNativePermissionsIOS": [
    "Camera",
    "LocationAlways",
    "LocationWhenInUse"
  ]

or use reactNativePermissionsIOS.json file

• Install pods by cd ios && pod install
• Clean and re run

As mentioned that still brings me to the same results but maybe help someone for some other issue

RN: v0.71.7
react-native-permissions: v3.8.0

@zoontek cleaning does not solve this one

SOLVED: Was managed to solve this. Not related directly to react-native-permissions.
It seems the version of react-native-permissions used inside react-native-qrcode-scanner is very old
That was casing the crush in my case.
Got me chasing the wrong place because I have a lot of implementations of react-native-permissions in that project.

So to solve it temporary, you can force react-native-permissions v3.8.0 on react-native-qrcode-scanner by
adding it to package.json following this - Answer:

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

Then remove node_modules clear cache, reinstall and it should be ok