How to Simplify Image Capture in Your React Native App

A really useful feature to include in your React Native app is the ability to use the phone’s camera to allow users to take images and preview them in the app.

In this post let me show you how easy it is to implement this feature in your own app. There are various packages that can be used for this such as the Expo Camera package which not only enables images to be taken and previewed but also includes many other customisable features and the ability to record videos. In this post we will be using a much simpler package as we only need to take images and preview them so we will be using the ImagePicker API.

Handling Different Configurations for Android vs iOS

Android

Taking photos on Android is relatively straightforward. We simply need to call the below function that is provided by the ImagePicker API:

launchCameraAsync

iOS

With iOS additional steps are required to manage the permissions ourselves.

i). Verify Camera Permissions

Create a function to verify & request user permission for camera usage:

async function verifyPermissions() {
    if (
      cameraPermissionInformation?.status ===
      ImagePickerAll.PermissionStatus.UNDETERMINED
    ) {
      const permission = await requestPermission();
      return permission.granted;
    }

    if (
      cameraPermissionInformation?.status ===
      ImagePickerAll.PermissionStatus.DENIED
    ) {
      Alert.alert("You need to grant permissions to use this app");
      return false;
    }
    return true;
  }

This function will return a Boolean value indicating whether permission was granted by the user.

ii). Create a function to launch the camera and take an image

Next we create the function to allow the camera to be launched and for the user to take an image:

async function takeImageHandler() {
    const permissionGranted = await verifyPermissions();
    //if no permission then return so not to run camera function
    if (!permissionGranted) {
      Alert.alert("You need to grant camera permissions to take a picture.");
      return;
    }

    const image = await ImagePickerAll.launchCameraAsync({
      allowsEditing: true,
      aspect: [16, 9],
      quality: 0.5,
    });
    console.log(image);
    setPickedImage(image.assets[0].uri);

With the above function we have successfully managed user permission for launching the camera and we can now move onto creating a function for use in both Android and iOS to preview an image.

To do this we would first need to manage the images taken and selected by user for preview with the useState function:

 const [pickedImage, setPickedImage] = useState();

Last Step- Image Preview

We can now create a function to allow the user to preview the image if there is one available:

 let imagePreview = <Text>No image taken</Text>;

  if (pickedImage) {

    imagePreview = <Image style={styles.image} source={{ uri: pickedImage }} />;

  }

  return (

    <View>

      <View style={styles.imagePreview}>{imagePreview}</View>

      <OutlinedButton icon=”camera” onPress={takeImageHandler}>

        Take Image

      </OutlinedButton>

    </View>

  );

Conclusion

This concludes the code needed to enable your React Native app to access the native device camera to take and preview images. As always it is important to refer to the official documentation for the packages to ensure that dependencies are installed correctly and the app has the correct configuration.

See you in the next post!