React Native Bottom Modal with Image Picker(Camera & Gallary)

A React Native component that displays a bottom modal with options to pick an image either from the camera or from the gallery. The component handles the required permissions for both platforms (iOS and Android) and allows users to select images easily.

Features

• Bottom Modal UI: A smooth sliding modal that appears at the bottom of the screen.
• Image Picker Options: Two buttons within the modal — one to open the camera and another to open the gallery.
• Permissions Handling: Automatically requests and checks for camera and gallery permissions based on the platform.
• Cross-Platform: Supports both iOS and Android platforms, adjusting permissions accordingly for each.
• Image Cropping Support: Supports basic image cropping options when selecting images (can be configured as needed).

Image

Installation

To use this component in your React Native project, you’ll need to install the following dependencies:

npm install react-native-modal react-native-image-crop-picker react-native-permissions

Exmple Code

   const [showbottommodal, setshowbottommodal] = useState(false);
   const [profileimage, setprofileimage] = useState(null);
   const handleImageSelected = (image) => {
      console.log('Selected image:', image);
      setprofileimage(image.path);  // Set the selected image path
   };
   return (
    <BottomModal
      visible={showbottommodal}
      onClose={() => setshowbottommodal(false)}
      onImageSelected={handleImageSelected}
    />
   )