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, [e-mail]

License

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