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!

Did authomatic link successfully worked? Have you tried linking it manually? — Milore, Jan 31 '19 at 18:07
The authomatic link worked, but as I was trying to link it manually, I saw that there were some commands that were duplicated. I'm going to test it again! — Evelyn Correa, Feb 01 '19 at 13:12

score 1 · Answer 1 · answered Mar 11 '19 at 16:48

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

score 1 · Answer 2 · answered May 02 '19 at 09:22

you can use react-native-camera-kit in-stand of react-native-camera.

follow below steps.

1] npm install react-native-camera-kit --save
2] react-native link react-native-camera-kit

Goto YourReactNativeProject -> android -> app -> src -> main -> AndroidManifest.xml and add below permission.

<uses-permission android:name="android.permission.CAMERA"/>

Below is the related code for camera/QR code scanning.

import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native';

import { CameraKitCameraScreen, } from 'react-native-camera-kit';

export default class App extends Component {
  constructor() {

    super();

    this.state = {

      QR_Code_Value: '',

      Start_Scanner: false,

    };
  }

  openLink_in_browser = () => {

    Linking.openURL(this.state.QR_Code_Value);

  }

  onQR_Code_Scan_Done = (QR_Code) => {

    this.setState({ QR_Code_Value: QR_Code });

    this.setState({ Start_Scanner: false });
  }

  open_QR_Code_Scanner=()=> {

    var that = this;

    if (Platform.OS === 'android') {
      async function requestCameraPermission() {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA, {
              'title': 'Camera App Permission',
              'message': 'Camera App needs access to your camera '
            }
          )
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {

            that.setState({ QR_Code_Value: '' });
            that.setState({ Start_Scanner: true });
          } else {
            alert("CAMERA permission denied");
          }
        } catch (err) {
          alert("Camera permission err", err);
          console.warn(err);
        }
      }
      requestCameraPermission();
    } else {
      that.setState({ QR_Code_Value: '' });
      that.setState({ Start_Scanner: true });
    }
  }
  render() {
    if (!this.state.Start_Scanner) {

      return (
        <View style={styles.MainContainer}>

          <Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</Text>

          <Text style={styles.QR_text}>
            {this.state.QR_Code_Value ? 'Scanned QR Code: ' + this.state.QR_Code_Value : ''}
          </Text>

          {this.state.QR_Code_Value.includes("http") ?
            <TouchableOpacity
              onPress={this.openLink_in_browser}
              style={styles.button}>
              <Text style={{ color: '#FFF', fontSize: 14 }}>Open Link in default Browser</Text>
            </TouchableOpacity> : null
          }

          <TouchableOpacity
            onPress={this.open_QR_Code_Scanner}
            style={styles.button}>
            <Text style={{ color: '#FFF', fontSize: 14 }}>
              Open QR Scanner
            </Text>
          </TouchableOpacity>

        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>

        <CameraKitCameraScreen
          showFrame={true}
          scanBarcode={true}
          laserColor={'#FF3D00'}
          frameColor={'#00C853'}
          colorForScannerFrame={'black'}
          onReadCode={event =>
            this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue)
          }
        />

      </View>
    );
  }
}
const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
  QR_text: {
    color: '#000',
    fontSize: 19,
    padding: 8,
    marginTop: 12
  },
  button: {
    backgroundColor: '#2979FF',
    alignItems: 'center',
    padding: 12,
    width: 300,
    marginTop: 14
  },
});

score 0 · Answer 3 · answered Feb 01 '19 at 09:43

I had the same problem and setting captureAdio={false} helped me with it.

 render() {
    return (
      <Container>     
      <View style={StyleSheet.cameraContainer}>
        <RNCamera
             ref={ref => {
               this.camera = ref;
            }} 
            style = {StyleSheet.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            captureAudio={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            onGoogleVisionBarcodesDetected={({ barcodes }) => {
              console.log(barcodes)
            }}
        />
          <Button style = {StyleSheet.capture} 
                  full info large onPress={() => this.takePicture()}>
              <Text> Take picture </Text>
          </Button>                 
      </View>
      </Container>
    );
  }

React-native-camera not appearing on screen

3 Answers3