My code is :
import React, { useEffect } from "react";
import * as ImagePicker from "expo-image-picker";
import Screen from "./app/components/Screen";
export default function App() {
async function permisionFunction() {
const result = await ImagePicker.getCameraPermissionsAsync();
if (!result.granted) {
console.log(result);
alert("need access to gallery for this app to work");
}
}
useEffect(() => {
permisionFunction();
}, []);
return <Screen></Screen>;
}
I denied the permissions for camera when it was promted for the first time.
Now whenever I opens the app always need access to gallery for this app to work this message is shown up. for android.
I tried by giving all the permissions to the expo app in settings but still same msg appears.
How can I solve this.
Use expo-cameramodule to access device camera.
I have curated the working example of small app with which you can access pictures from gallery as well as device camera.
Working App: Expo Snack
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import { Camera } from 'expo-camera';
import * as ImagePicker from 'expo-image-picker';
export default function Add({ navigation }) {
const [cameraPermission, setCameraPermission] = useState(null);
const [galleryPermission, setGalleryPermission] = useState(null);
const [camera, setCamera] = useState(null);
const [imageUri, setImageUri] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
const permisionFunction = async () => {
// here is how you can get the camera permission
const cameraPermission = await Camera.requestPermissionsAsync();
setCameraPermission(cameraPermission.status === 'granted');
const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();
console.log(imagePermission.status);
setGalleryPermission(imagePermission.status === 'granted');
if (
imagePermission.status !== 'granted' &&
cameraPermission.status !== 'granted'
) {
alert('Permission for media access needed.');
}
};
useEffect(() => {
permisionFunction();
}, []);
const takePicture = async () => {
if (camera) {
const data = await camera.takePictureAsync(null);
console.log(data.uri);
setImageUri(data.uri);
}
};
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
console.log(result);
if (!result.cancelled) {
setImageUri(result.uri);
}
};
return (
<View style={styles.container}>
<View style={styles.cameraContainer}>
<Camera
ref={(ref) => setCamera(ref)}
style={styles.fixedRatio}
type={type}
ratio={'1:1'}
/>
</View>
<Button title={'Take Picture'} onPress={takePicture} />
<Button title={'Gallery'} onPress={pickImage} />
{imageUri && <Image source={{ uri: imageUri }} style={{ flex: 1 }} />}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
cameraContainer: {
flex: 1,
flexDirection: 'row',
},
fixedRatio: {
flex: 1,
aspectRatio: 1,
},
button: {
flex: 0.1,
padding: 10,
alignSelf: 'flex-end',
alignItems: 'center',
},
});
It's mention in doc Configuration.
In managed apps, Camera requires Permissions.CAMERA. Video recording requires Permissions.AUDIO_RECORDING.
I have the same problem... I'm using expo SDK 42 and after a denied answer the permissions request does not trigger again anymore.
Anyway, You have some mistakes in your code, you have to watch the status property of the permissions response.
this is how to check the response status
const requestPermissions = async () => {
try {
const {
status,
} = await ImagePicker.requestMediaLibraryPermissionsAsync();
console.log('status lib', status);
setHasPickerPermission(status === 'granted');
} catch (error) {
console.log('error', error);
}
try {
const { status } = await ImagePicker.requestCameraPermissionsAsync();
console.log('status camera', status);
setHasCameraPermission(status === 'granted');
} catch (error) {
console.log('error', error);
}
};
useEffect(() => {
requestPermissions();
}, []);
If the user has denied the camera permission the first time, the second time you request permission with requestCameraPermissionsAsync() the answer will always be "denied" unless the user manually changes the permission in the app settings.
import { Linking } from "react-native";
import { useCameraPermissions } from "expo-image-picker";
export default function App() {
const [status, requestPermissions] = useCameraPermissions();
const requestPermissionAgain = () => {
Linking.openSettings();
}
useEffect(() => {
if (!status?.granted) requestPermissions();
}, []);
}
Related
I need to get the detailed bluetooth data of the surrounding devices when I press the button. I use the react-native-ble-plx library for this, but this library does not integrate with android 12. I made some necessary permisson adjustments for this. On manifest.xml file and app.js files. When I run the code, I get the following error about the "scanDeviceStart" method.
TypeError: Cannot read property 'startDeviceScan' of null
What would you suggest me to solve this error? my codes are below
React-Native-ble-plx = https://dotintent.github.io/react-native-ble-plx/#blemanager
import React, { useState, useEffect } from 'react';
import {
SafeAreaView,
View,
Text,
Button,
StyleSheet,
PermissionsAndroid ,
FlatList,
} from 'react-native';
import BleManager from 'react-native-ble-plx';
import { PERMISSIONS, requestMultiple } from 'react-native-permissions';
import DeviceInfo from 'react-native-device-info';
const requestPermissions = async () => {
if (Platform.OS === 'android') {
const apiLevel = await DeviceInfo.getApiLevel();
if (apiLevel < 31) {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: 'Location Permission',
message: 'Bluetooth Low Energy requires Location',
buttonNeutral: 'Ask Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
},
);
} else {
const result = await requestMultiple([
PERMISSIONS.ANDROID.BLUETOOTH_SCAN,
PERMISSIONS.ANDROID.BLUETOOTH_CONNECT,
PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
]);
const isGranted =
result['android.permission.BLUETOOTH_CONNECT'] ===
PermissionsAndroid.RESULTS.GRANTED &&
result['android.permission.BLUETOOTH_SCAN'] ===
PermissionsAndroid.RESULTS.GRANTED &&
result['android.permission.ACCESS_FINE_LOCATION'] ===
PermissionsAndroid.RESULTS.GRANTED;
}
}
};
const App = () => {
const [devices, setDevices] = useState([]);
const [scanning, setScanning] = useState(false);
const [bleManager, setBleManager] = useState(null);
function requestBluetoothPermissions(cb) {
if (Platform.OS === 'android') {
DeviceInfo.getApiLevel().then((apiLevel) => {
if (apiLevel < 31) {
PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: 'Location Permission',
message: 'Bluetooth Low Energy requires Location',
buttonNeutral: 'Ask Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
},
).then((granted) => {
cb(granted === PermissionsAndroid.RESULTS.GRANTED);
});
} else {
requestMultiple([
PERMISSIONS.ANDROID.BLUETOOTH_SCAN,
PERMISSIONS.ANDROID.BLUETOOTH_CONNECT,
PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
]).then((result) => {
const isGranted =
result['android.permission.BLUETOOTH_CONNECT'] === PermissionsAndroid.RESULTS.GRANTED &&
result['android.permission.BLUETOOTH_SCAN'] === PermissionsAndroid.RESULTS.GRANTED &&
result['android.permission.ACCESS_FINE_LOCATION'] === PermissionsAndroid.RESULTS.GRANTED;
cb(isGranted);
});
}
});
} else {
cb(true);
}
}
useEffect(() => {
if (!bleManager) {
requestBluetoothPermissions((isGranted) => {
if (isGranted) {
const manager = new BleManager();
setBleManager(manager);
manager.startDeviceScan( [serialUUIDs.serviceUUID],
{scanMode: ScanMode.LowLatency}, (error, device) => {
if (error) {
console.log(error.message);
return;
}
console.log(device.name);
console.log(device.id);
if (device.name) {
setDevices((prevDevices) => [...prevDevices, device]);
}
});
setScanning(true);
}
});
}
}, []);
return (
<SafeAreaView>
<View>
{scanning ? (
<Button
title="Stop Scanning"
onPress={() => {
bleManager.stopDeviceScan();
setScanning(false);
}}
/>
) : (
<Button
title="Start Scanning"
onPress={() => {
requestBluetoothPermissions((isGranted) => {
if (isGranted) {
setDevices([]);
bleManager.startDeviceScan([serialUUIDs.serviceUUID],
{scanMode: ScanMode.LowLatency},(error, device) => {
if (error) {
console.log(error.message);
return;
}
console.log(device.name);
console.log(device.id);
if (device.name) {
setDevices((prevDevices) => [...prevDevices, device]);
}
});
setScanning(true);
}
});
}}
/>
)}
</View>
<FlatList
data={devices}
renderItem={({ item }) => (
<Text>
{item.name} ({item.id})
</Text>
)}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
);
};
export default App;
I am using react-native-call-detection package to save incoming call number (and send it on server later), I also want to reject/answer the incoming call based on the pressed button (based on server response later).
what package should I use to do it? I just found react-native-call-keep but all examples gave fake phone number to the functons and I don't know how to use its functions or how to get my call uuid.I just know there is reject/answer call function and I should call addEventListener functions before calling functions.
here is my current code:
import React, {useEffect, useState} from 'react';
import RNCallKeep from 'react-native-callkeep';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
TouchableHighlight,
PermissionsAndroid,
} from 'react-native';
import CallDetectorManager from 'react-native-call-detection';
import RNCallKeep from 'react-native-callkeep';
export default class MasterScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
featureOn: false,
incoming: false,
number: null,
};
}
componentDidMount() {
this.askPermission();
this.startListenerTapped();
this.setupCallKeep();
}
setupCallKeep() {
const options = {
android: {
alertTitle: 'Permissions Required',
alertDescription:
'This application needs to access your phone calling accounts to make calls',
cancelButton: 'Cancel',
okButton: 'ok',
imageName: 'ic_launcher',
additionalPermissions: [PermissionsAndroid.PERMISSIONS.READ_CONTACTS],
},
};
try {
RNCallKeep.setup(options);
RNCallKeep.setAvailable(true); // Only used for Android, see doc above.
} catch (err) {
console.error('initializeCallKeep error:', err.message);
}
}
askPermission = async () => {
try {
const permissions = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE,
]);
console.log('Permissions are:', permissions);
} catch (err) {
console.warn(err);
}
};
startListenerTapped = () => {
this.setState({featureOn: true});
this.callDetector = new CallDetectorManager(
(event, phoneNumber) => {
console.log(event);
if (event === 'Disconnected') {
this.setState({incoming: false, number: null});
} else if (event === 'Incoming') {
this.setState({incoming: true, number: phoneNumber});
} else if (event === 'Offhook') {
this.setState({incoming: true, number: phoneNumber});
} else if (event === 'Missed') {
this.setState({incoming: false, number: null});
}
},
true,
() => {},
{
title: 'Phone State Permission',
message:
'This app needs access to your phone state in order to react and/or to adapt to incoming calls.',
},
);
};
stopListenerTapped = () => {
this.setState({featureOn: false});
this.callDetector && this.callDetector.dispose();
};
render() {
return (
<View style={styles.body}>
<Text>incoming call number: {this.state.number}</Text>
<TouchableOpacity
onPress={/*what to do */} style={{
width: 200,
height: 200,
justifyContent: 'center',
}}><Text>answer</Text></TouchableOpacity>
<TouchableOpacity
onPress={/*what to do */} style={{
width: 200,
height: 200,
justifyContent: 'center',
}}>
<Text>reject</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
body: {
backgroundColor: 'honeydew',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
text: {
padding: 20,
fontSize: 20,
},
button: {},
});`
Use RNCallKeep.rejectCall. Like so
<TouchableOpacity
onPr ess={() => RNCallKeep.rejectCall(uuid)}
st yle={{
width: 200,
height: 200,
justifyContent: 'center',
}}
>
<Text>reject</Text>
</TouchableOpacity>
I am using React native maps for my app and I am using PermissionsAndroid from react-native.
For user current location tracking I am using react-native-geolocation-service package. When the app run for the first time, I want to show the Android user do they want to give the location permission. My first issue was it never ask me the location permission in Android. It automatically granted the location permission. I don't know why.
If user don't give the permission. then it will save it to the local state a string. I have created one button, if user does not give permission the user will click the button and it will navigate to the Android, settings option. In here the problem is after giving the permission from android settings, i don't know how to update my local state. as result the button is always navigate me to the Android device settings.
This is my AndroidManifest.xml set up
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="API KEY"/>
This is my all code
import React, {useState, useEffect, useRef, useCallback} from 'react';
import Geolocation from 'react-native-geolocation-service';
import {
Platform,
PermissionsAndroid,
Linking,
Alert,
Text,
View,
StyleSheet,
Button,
} from 'react-native';
import MapView from 'react-native-maps';
// Initial state
const initialState = {
latitude: 60.38879664415455,
longitude: 24.33366230104724,
latitudeDelta: 5,
longitudeDelta: 5,
};
export default function App() {
const [locationPermission, setLocationPermission] = useState('');
const [location, setLocation] = useState(initialState);
const mapRef = useRef<Map>(null);
const animateToRegion = useCallback(() => {
if (location?.longitudeDelta) {
mapRef?.current?.animateToRegion(location, 1000);
}
}, [location]);
useEffect(() => {
animateToRegion();
}, [location, animateToRegion]);
const hasPermissionIOS = async () => {
const status = await Geolocation.requestAuthorization('whenInUse');
if (status === 'granted') {
setLocationPermission('granted');
return true;
}
if (status === 'denied') {
setLocationPermission('denied');
}
return false;
};
const hasLocationPermission = async () => {
if (Platform.OS === 'ios') {
const hasPermission = await hasPermissionIOS();
return hasPermission;
}
const hasPermission = await PermissionsAndroid.check(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
);
if (hasPermission) {
return true;
}
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: 'this app wants to access your current location',
message:
'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
setLocationPermission('granted');
console.log('You can use the location');
} else {
console.log('Camera permission denied');
setLocationPermission('denied');
}
} catch (err) {
console.warn(err);
}
};
useEffect(() => {
const hasPermission = hasLocationPermission();
if (!hasPermission) {
return;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const locationButton = () => {
if (locationPermission === 'denied') {
if (Platform.OS === 'ios') {
const openSetting = () => {
Linking.openSettings().catch(() => {
Alert.alert('Unable to open settings');
});
};
Alert.alert(
'Turn on Location Services to allow s-kaupat to determine your location.',
'',
[{text: 'Go to Settings', onPress: openSetting}, {text: 'Dismiss'}],
);
} else {
// android setting
Linking.openSettings();
}
} else {
console.log('you are good to go');
}
};
const onMapReady = useCallback(async () => {
const hasPermission = await hasLocationPermission();
if (!hasPermission) {
return;
}
Geolocation.getCurrentPosition(
position => {
const {latitude, longitude} = position.coords;
if (location) {
setLocation({
latitude,
longitude,
longitudeDelta: 0.4,
latitudeDelta: 0.4,
});
}
},
error => {
// eslint-disable-next-line no-console
console.log(error);
},
{
accuracy: {
android: 'high',
ios: 'best',
},
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 10000,
distanceFilter: 0,
},
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<View style={styles.container}>
<MapView
style={styles.mapStyle}
initialRegion={initialState}
ref={mapRef}
showsUserLocation={true}
showsMyLocationButton={false}
userInterfaceStyle={'light'}
onMapReady={onMapReady}
renderToHardwareTextureAndroid={true}
/>
<Text style={styles.paragraph}>Location permission</Text>
<Button title="permission" onPress={locationButton} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: '10%',
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
mapStyle: {
height: '60%',
},
});
I am using the expo-image-picker to get the image uri of a locally stored image. I want to use the expo-image-manipulator to resize the image prior to sending it to the backend but the expo imageManipulator will not take the uri from the expo image picker. These errors are happening while running in expo on an android emulator.
Here is the basic code getting the uri:
import * as ImagePicker from "expo-image-picker";
const selectImage = async () => {
try {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: 0.5,
});
if (!result.cancelled) onChangeImage(result.uri);
} catch (error) {
console.log("Error reading an image", error);
}
};
I can send this image directly to the backend and save it to my S3 just fine. When I console.log(uri), here is what I get:
file:/data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FThredFit-59f4d533-f203-4efb-bcb0-6a5786d44584/ImagePicker/0ea74111-8677-4074-81af-5fbc1f0758d5.jpg
Now I try to enter this into the image resizer below (as imageUri):
import * as ImageManipulator from 'expo-image-manipulator';
const setSize = async (imageUri, width, height) => {
try {
const manipResult = await ImageManipulator.manipulateAsync(
imageUri,
[{ resize: { width: width, height: height } }],
{ format: 'jpeg' }
);
console.log(manipResult);
} catch (error) {
console.log("Error manipulating image: ", error);
}
};
and I get the following error on the android emulator:
abi38_0_0.com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String
if I stringify the imageUrl first, then I get past this error but the resizer throws an error saying it can't decode the image:
[Error: Could not get decoded bitmap of "file:/data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FThredFit-59f4d533-f203-4efb-bcb0-6a5786d44584/ImagePicker/0ea74111-8677-4074-81af-5fbc1f0758d5.jpg": java.lang.Exception: Loading bitmap failed]
Image of the emulator error
image of the logged error
It's hard to see exactly what is going on here because you didn't provide all of the relevant code. I suspect that the issue you encountered is around stringifying an object rather than getting the appropriate value off of it. Here's an example of ImagePicker and ImageManipulator integration: https://snack.expo.io/#brents/image-picker-and-manipulator
import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as ImageManipulator from 'expo-image-manipulator';
import Constants from 'expo-constants';
export default function ImagePickerExample() {
const [image, setImage] = useState(null);
useEffect(() => {
(async () => {
if (Platform.OS !== 'web') {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
})();
}, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
if (result.cancelled) {
return;
}
const manipResult = await ImageManipulator.manipulateAsync(
result.localUri || result.uri,
[{ rotate: 90 }, { flip: ImageManipulator.FlipType.Vertical }],
{ compress: 1, format: ImageManipulator.SaveFormat.PNG }
);
setImage(manipResult.uri);
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Pick an image from camera roll" onPress={pickImage} />
{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
);
}
I’m trying to make a prototype application that over and over
1- record a video with the camera for x seconds
2- displays this video
For this I use the components Camera from expo-camera and Video from expo-av
For this I have two views :
I use in my code the stateSequence property and the sequencer() function which displays alternately the view with the Camera component which films for x seconds , and the video view which allows me to display the video.
Sequencer() is triggered with setInterval( this.sequencer , 10000) found in the componentWillMount()
I can switch alternately from a View with the Camera component to a View with the Video component.
To record a video with the Camera component I use recordAsync(), but I get the following error:
Unhandled promise rejection: Error: Camera is not running
I’m using an android phone for my tests.
Can’t you help me
this is my code
import { StyleSheet, Text, View ,TouchableOpacity} from 'react-native';
import * as Permissions from 'expo-permissions';
import { Camera } from 'expo-camera';
import { Video } from 'expo-av';
import { Logs } from 'expo';
export default class SequenceViewer extends Component {
constructor(props) {
super(props);
this.state = {
stateSequence: "SHOOT ",
hasCameraPermission: null,
type: Camera.Constants.Type.front,
}
this.recordVideo = this.recordVideo.bind(this)
}
sequencer = () => {
if(this.state.stateSequence==="WATCH"){
this.setState({ stateSequence: "SHOOT",})
this.recordVideo(); // Error message Camera is not running
} else {
this.setState({stateSequence: "WATCH"})
}
}
async componentWillMount() {
let rollStatus = await Permissions.askAsync(Permissions.CAMERA_ROLL);
let cameraResponse = await Permissions.askAsync(Permissions.CAMERA)
if (rollStatus.status=='granted'){
if (cameraResponse.status == 'granted' ){
let audioResponse = await Permissions.askAsync(Permissions.AUDIO_RECORDING);
if (audioResponse.status == 'granted'){
this.setState({ permissionsGranted: true });
setInterval( this.sequencer , 10000);
}
}
}
}
recordVideo = async () => {
if(this.state.cameraIsRecording){
this.setState({cameraIsRecording:false})
this.camera.stopRecording();
}
else {
this.setState({cameraIsRecording:true})
if (this.camera) {
let record = await this.camera.recordAsync(quality='480p',maxDuration=5,mute=true).then( data =>{
this.setState( {recVideoUri :data.uri})
})
}
}
};
render() {
const { hasCameraPermission } = this.state
if(this.state.stateSequence=="WATCH")
{
return(
<View style={styles.container}>
<Video
source={{ uri:this.state.recVideoUri }}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay
isLooping
style={{ width: 300, height: 300 }}
ref={(ref) => { this.player = ref }}
/>
</View>
)
} else
{
return(
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={this.state.type} ref={ref => {this.camera = ref; }}></Camera>
</View>
)
}
}
}
const styles = StyleSheet.create({
viewerText: {
fontSize: 20,
fontWeight: 'bold',
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Thank you
I had the same problem, my solution was by default camera type have to be "back" and you could change to "front" by:
componentDidMount = () => {
this.props.navigation.addListener('didFocus', async () => {
await setTimeout(() => {
this.setState({ cameraType: Camera.Constants.Type.front })
}, 100)
});
}
I was getting the "Camera is not running" error when i changed screens. So for functional components instead of withNavigationFocus(Camera) use this method:
import { useIsFocused } from '#react-navigation/native';
function MyComponent() {
const isFocused = useIsFocused()
return (
<View>
{ isFocused && <RNCamera /> }
</View>
)
}