Installation

Add the dependency:

npm i react-native-image-picker-modal

Peer Dependencies

"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

• [x] ~~LICENSE~~
• [ ] Write an article about the lib on Medium

Author

FreakyCoder, [email protected]

License

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