I am building an app to record video using React Native and RNCamera. I've installed RNCamera with the commands: npm install react-native-camera and pod install; however, when my app runs, the camera (and the button I created to trigger the camera) do not show up. Here is where I declare my RNCamera:
<View style={styles.container}>
<RNCamera
ref={(ref) => {
this.camera = ref;
}}
style={styles.preview}
type={RNCamera.Constants.Type.front}
flashMode={RNCamera.Constants.FlashMode.on}
// permissionDialogTitle={'Permission to use camera'}
// permissionDialogMessage={
// "We need your permission to use your phone camera"
// }
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
androidRecordAudioPermissionOptions={{
title: 'Permission to use audio recording',
message: 'We need your permission to use your audio',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
/>
<View
style={{ flex: 0, flexDirection: "row", justifyContent: "center"}}
>
<TouchableOpacity onPress={this.startRecording.bind(this)} style={styles.capture}>
<Text style={{ fontSize: 14 }}> RECORD </Text>
</TouchableOpacity>
</View>
</View>My startRecording() function is declared as follows:
startRecording = async () => {
const options = { orientation: "landscapeRight"};
this.setState({ recording: true });
const { uri, codec = "mp4" } = await this.camera.recordAsync(options);
console.log(uri)
}I also have the following lines in my Info.plist file:
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) to upload files.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Permission required</string>
<key>NSMicrophoneUsageDescription</key>
<string>Permission required for microphone use</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Permission required for photo gallery</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Photo library usage</string>
Does anyone know how to get RNCamera to show up? I've tried to manually link it, too, but that did not work. Thank you!
EDIT
In my App.js file, I call my camera class as such: <RecordVideo/> but inside of a <View>. However, when I deleted the view tags, the camera started working. Any idea why this is happening?