How to prompt camera permission when a button is clicked in react? - react-native

Question

SOLVED!: Check the one reply below. It solves it. But, after you allow camera, when you click the button again, it won't prompt again, which is natural. You have to deny camera from the emulator or phone's settings again for it to prompt again.
I am basically trying to do this: a button, when clicked; it will prompt the user of camera permission, in react. In my current app here, it asks on first launch of the app. I tried various ways to implement it with button, but to no avail. But this code works, without error. Here is my app.js:
import React, {Component} from 'react'
import {StyleSheet, View, Text, Button} from 'react-native'
import {Permission, PERMISSION_TYPE} from 'D:/Reactdeneme/reacttest/src/AppPermission'
export default class App extends Component {
componentDidMount() {
Permission.checkPermission(PERMISSION_TYPE.camera)
//this the thing that prompts the camera permission. I want this in a button.
}
render() {
return (
<View style={styles.container}>
<Text style={{fontSize: 30}}>izinler</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
THIS PART IS PROBABLY OPTIONAL, so please don't be afraid of the long code blocks. Here is my AppPermissions.js aswell:
import {check, request, PERMISSIONS, RESULTS} from 'react-native-permissions';
import {Platform} from 'react-native'
const PLATFORM_CAMERA_PERMISSIONS= {
ios:PERMISSIONS.IOS.MICROPHONE,
android: PERMISSIONS.ANDROID.CAMERA
}
const REQUEST_PERMISSION_TYPE = {
camera: PLATFORM_CAMERA_PERMISSIONS
}
const PERMISSION_TYPE= {
camera: 'camera'
}
class AppPermission {
checkPermission= async (type): Promise<boolean> => {
console.log("AppPermission checkPermission type:", type)
const permissions = REQUEST_PERMISSION_TYPE[type][Platform.OS]
console.log("AppPermission checkPermission permissions:", permissions)
if(!permissions){
return true
}
try {
const result = await check(permissions)
console.log("AppPermission checkPermission result:", result)
if (result === RESULTS.GRANTED) return true
return this.requestPermission(permissions)
} catch (error) {
console.log("AppPermission checkPermission error:", error)
return false
}
}
requestPermission=async(permissions): Promise<boolean> => {
console.log("AppPermission requestPermission permissions:", permissions)
try {
const result = await request(permissions)
console.log("AppPermission requestPermission result:", result)
return result === RESULTS.GRANTED
}catch(error) {
console.log("AppPermission requestPermission error:", error)
return false
}
}
}
const Permission = new AppPermission()
export {Permission, PERMISSION_TYPE}

Answer 1

You should read more react-native docs.
Remove checkPermission in componentDidMount and add this to onPress props of Button.
import React, {Component} from 'react'
import {StyleSheet, View, Text, Button} from 'react-native'
import {Permission, PERMISSION_TYPE} from 'D:/Reactdeneme/reacttest/src/AppPermission'
export default class App extends Component {
checkPermission = () => {
Permission.checkPermission(PERMISSION_TYPE.camera);
}
render() {
return (
<View style={styles.container}>
<Text style={{fontSize: 30}}>izinler</Text>
<Button title="Check" onPress={this.checkPermission}/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})