Camera component is not working as expected in react-native?

Question

I have tried to implement Camera in my react-native application by using react-native-camera, However it doesn't seem like working. When i run react-native run-android blank white screen is appearing with out any errors. Here is my code,

import Camera from 'react-native-camera';

<Camera
       style={Styles.preview}
       aspect={Camera.constants.Aspect.fill}
       ref={cam => { this.camera = cam; }}
      />
const Styles = {
        preview: {
            flex: 1,
            justifyContent: 'flex-end',
            alignItems: 'center',
        }
};

Answer 1

Did you set the permission so that the app can use the camera? If you haven't than you can set the permission as below:

Android

To enable video recording feature you have to add the following code to the AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 

ios

Add the following permission in /ios/yourProject/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
  ...
    <key>NSCameraUsageDescription</key>
    <string>We need your beautiful camera</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>We're only saving to temp, promise</string>
  </dict>
</plist>

For full setup and code for camera app on ios follow this tutorial. For more info on permission follow this.

Answer 2

I had a similar problem and discovered that I needed to manually set the header paths for iOS as described in the README here. Hope that helps you!