Skip to content

WrathChaos/react-native-image-picker-modal

Repository files navigation

React Native Image Picker Modal

Battle Tested ✅

React Native Image Picker Modal

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Image Picker Modal

Installation

Add the dependency:

npm i react-native-image-picker-modal

Peer Dependencies

IMPORTANT! You need install them
"react-native-image-picker": ">= 4.7.0",
"react-native-modal": ">= 13.0.0",
"@freakycoder/react-native-picker-modal": ">= 0.1.0",

Usage

Import

import ImagePickerModal from "react-native-image-picker-modal";

Fundamental Usage

<ImagePickerModal
  title="You can either take a picture or select one from your album."
  data={["Take a photo", "Select from the library"]}
  isVisible={isVisible}
  onCancelPress={() => {
    setVisible(false);
  }}
  onBackdropPress={() => {
    setVisible(false);
  }}
  onPress={(item: any) => {
    setSelectedItem(item);
    // Example usage from the object: `item.assets[0].uri`
  }}
/>

Asset Object from The Selection

{
  "assets": [
    {
      "timestamp": string, // "2018-03-30T19:14:19.365+0000"
      "type": string, // "image/jpg"
      "fileName": string,
      "fileSize": number,
      "height": number,
      "width": number,
      "id": string,
      "uri": string
    }
  ]
}

Example Project 😍

You can checkout the example project 🥰

Simply run

  • npm i
  • react-native run-ios/android

should work of the example project.

Configuration - Props

Fundamentals [Required]

Property Type Default Description
title string undefined change the title
data string[] undefined set the picker modal dataset as string array
isVisible boolean undefined change the picker modal visibility
onPress function undefined set your own logic for the button functionality when it is pressed
onCancelPress function undefined set your own logic for the cancel button functionality when it is pressed

Customization (Optionals)

Property Type Default Description
onBackdropPress function undefined set your own logic for the backdrop of the modal functionality when it is pressed
TouchableComponent TouchableHightlight default set your own component instead of default react-native TouchableHightlight component
style ViewStyle default set or override the style object for the main container
dividerStyle ViewStyle default set or override the style object for the divider style
cancelButtonStyle ViewStyle default set or override the style object for the cancel button style
titleTextContainer ViewStyle default set or override the style object for the title text container
titleTextStyle TextStyle default set or override the style object for the title text style
cancelButtonTextStyle ViewStyle default set or override the style object for the cancel button text container
actionButtonStyle ViewStyle default set or override the style object for the action button container
actionButtonTextStyle ViewStyle default set or override the style object for the action button text
actionButtonUnderlayColor string rgba(0,0,0,0.3) change the action button's underlay color
cancelButtonUnderlayColor string rgba(200,200,200,0.1) change the cancel button's underlay color
includeBase64 boolean false when you need base64
capturePhotoOptions CameraOptions default override the options for capturing the photo
libraryPhotoOptions ImageLibraryOptions default override the options for picking images from library

Future Plans

  • LICENSE
  • Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Image Picker Modal is available under the MIT license. See the LICENSE file for more info.