React-native-camera not appearing on screen

Question

I'm developing an app that reads QR Codes using react-native-camera, but camera preview does not appear on screen.

I'm working on react-native 0.57.7, using react-native-camera 1.10.0. I have run the following commands:

npm install react-native-camera --save

react-native link react-native-camera

Here is where I'm calling the camera in my code:

import React, {Component} from 'react';
import {View, Image, TouchableOpacity, ScrollView} from 'react-native';
import RNCamera from 'react-native-camera';

class profPresencaScreen extends Component{
<View style={{flex: 1}}>
          <RNCamera 
              ref={ref => {
                this.camera = ref;
            }}
            defaultTouchToFocus
            mirrorImage={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            />
</View>
}

export default profPresencaScreen;

The permission dialog opens and it even shows a loading asset in the first time I open the app, but the camera preview never appears. Is there any way I can show it on my app?

---

EDIT: I made it work! I set manually the style of the camera:

<RNCamera 
              ref={ref => {
                this.camera = ref;
            }}
            defaultTouchToFocus
            mirrorImage={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            style={{flex: 1}}
            />

Simple as that! Thanks to everyone that tried to help!

Answer 1

Did you setup the permissions in the info.plist file?

Based in the documentation: https://github.com/react-native-community/react-native-camera

With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the Info.plist of your project. This should be found in 'your_project/ios/your_project/Info.plist'. Add the following code: NSCameraUsageDescription Your message to user when the camera is accessed for the first time

NSPhotoLibraryUsageDescription Your message to user when the photo library is accessed for the first time

NSMicrophoneUsageDescription Your message to user when the microphone is accessed for the first time On Android, you require buildToolsVersion of 25.0.2+. This should easily and automatically be downloaded by Android Studio's SDK Manager.

On iOS 11 and later you need to add NSPhotoLibraryAddUsageDescription key to the Info.plist. This key lets you describe the reason your app seeks write-only access to the user’s photo library. Info.plist can be found in 'your_project/ios/your_project/Info.plist'. Add the following code:

NSPhotoLibraryAddUsageDescription Your message to user when the photo library is accessed for the first time