Implementing Camera with react-native-image-picker in React Native

 Hey, React Native enthusiasts! In today’s tutorial, we’ll explore how to seamlessly implement a camera in your React Native application using react-native-image-picker.

Unlike some alternatives, this method eliminates the need for explicit Android permissions to access the camera, simplifying the overall implementation process.

Getting Started

Before we dive into the implementation, let’s take a quick look at two popular alternatives: react-native-camera and react-native-vision-camera.

Implementing Camera in React Native using react-native-camera

Hello, React Native enthusiasts! Today, we’re diving into the exciting world of implementing a camera in our React…

medium.com

To know about react native vision camera,

Implementing a Camera in a React Native App using react-native-vision-camera

Recently, react-native-vision-camera emerged as a powerful alternative to react-native-camera, which has been…

medium.com

Installation

Start by installing the react-native-image-picker library:

npm i react-native-image-picker

Implementation

Now, let’s jump into the React Native code:

import React from 'react';
import { View ,Button} from 'react-native';
import {launchCamera} from 'react-native-image-picker';

const App = () => {

  const handleCameraLaunch = async (isCamera: boolean) => {
    const options = {
      mediaType: isCamera ? 'photo' : 'video',
    };

    try {
      const response = await launchCamera(options);
        console.log('pickedFile',response);
    } catch (error) {
      console.error('Error:', error);
    }
  };


  return (
    <View style={{ flex: 1 }}>
       <Button title="Camera" onPress={async () => {
              handleCameraLaunch(true);
          }} />
       <Button title="Video" onPress={async () => {
              handleCameraLaunch(false);
          }} />
    </View>
  );
};

export default App;Advantage:

Advantages:

1. Direct access to the default camera.
2. Access to camera settings.
3. Photo preview with confirmation.
4. Easy switching between front and back cameras.

Disadvantages:

• Inability to switch between photo and video modes simultaneously.

This implementation strikes a balance between simplicity and functionality. It’s a great choice for scenarios where quick access to the camera without extensive configuration is a priority.

Happy coding! 📸✨

🔗 Reference Links: