4.md

Lesson 4: Basic Camera App

1. Replace the BaseScreen component in the welcomeScreen.tsx file with a simple camera view.

import Camera from 'react-native-camera';

<Camera
  ref={(cam) => {
    this.camera = cam;
  }}
  captureTargets={
      Platform.OS == 'ios' 
      ? Camera.constants.CaptureTarget.disk
      : Camera.constants.CaptureTarget.cameraRoll
  }
  style={styles.preview}
  aspect={Camera.constants.Aspect.fill}>
</Camera>

2. Add button and its handler to the welcomeScreen for capturing an image.

<Text style={styles.capture} onPress={this.takePicture.bind(this)}>
  Capture
</Text>

async takePicture() {
  const options = {};
  try
  {
    const data = await this.camera.capture({metadata: options});
    alert("Picture taken");
  }
  catch (err)
  {
    alert(err);
  }
}

3. Add some styles to clean up the layout of the camera view and don't forget to import StyleSheet.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    position: 'absolute',
    bottom: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  }
});

Exit Criteria

1. react-native-camera package added and linked.
2. Working camera view in main app layout.
3. Click capture button and alert appears.