How Can I Open a Camera From Within my React Native App?

Question

I'm working on an app where we want to allow our users (tech support personnel) to take a photo of an employee's badge so we can analyze the photo and extract the badge ID (we already have an open source algorithm to do this) to create a ticket. I have the app running a webview of the application used by helpdesk personnel from their desktops, as well as a button at the top to open the camera (currently it's just an alert). Code is below:

const onPress = () => {
  Alert.alert('Will capture the badge using the camera');
 };

export default class App extends React.Component {

render() {
return (
  <View style={styles.container}>
  <Button
    onPress={onPress}
    title="Capture Badge"
    color="#841584"
    accessibilityLabel="Capture a Customer's ID via a picture of their badge"
  />

    <WebView
         source={{uri: "www.example.com"}}
     />
    </View>
);
}

Basically, what do I need to put in onPress so that I can take a picture and then send it to our algorithm (the algorithm will be just a function call at the end of onPress)? I've done research on using a camera in react native, but everything is taking about rendering a camera in the view. I only want to open a camera view if a user taps the "Capture Badge" button at the top of the app.

Felix Too Felix Too · Accepted Answer · 2019-01-16T17:40:41

You can use react-native-image-cropper-picker. If I understood you correctly, you want to be able to launch the camera and then as a promise, send the image to your object detection algorithm. With this library you can launch the camera as follows:

openCamera(){
    ImagePicker.openCamera({
      width: 300,
      height: 400,
      cropping: true
    }).then(image => {
      //Your image
      console.log(image);
    });
}

How Can I Open a Camera From Within my React Native App?

1 Answers