Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-image-picker-modal
Easy to use image picker modal with awesome iOS Picker design for React Native
https://github.com/wrathchaos/react-native-image-picker-modal
android app-development apple front-end google ios javascript kuray mobile mobile-application-development react-native reactjs typescript ui ux
Last synced: 5 days ago
JSON representation
Easy to use image picker modal with awesome iOS Picker design for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-image-picker-modal
- Owner: WrathChaos
- Created: 2022-01-04T19:49:22.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-26T18:27:33.000Z (almost 3 years ago)
- Last Synced: 2024-11-02T14:51:37.487Z (12 days ago)
- Topics: android, app-development, apple, front-end, google, ios, javascript, kuray, mobile, mobile-application-development, react-native, reactjs, typescript, ui, ux
- Language: Java
- Homepage: https://freakycoder.com
- Size: 19.6 MB
- Stars: 9
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-image-picker-modal)
[](https://github.com/WrathChaos/react-native-image-picker-modal)
[](https://www.npmjs.com/package/react-native-image-picker-modal)
[](https://www.npmjs.com/package/react-native-image-picker-modal)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i react-native-image-picker-modal
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"react-native-image-picker": ">= 4.7.0",
"react-native-modal": ">= 13.0.0",
"@freakycoder/react-native-picker-modal": ">= 0.1.0",
```
# Usage
## Import
```jsx
import ImagePickerModal from "react-native-image-picker-modal";
```
## Fundamental Usage
```jsx
{
setVisible(false);
}}
onBackdropPress={() => {
setVisible(false);
}}
onPress={(item: any) => {
setSelectedItem(item);
// Example usage from the object: `item.assets[0].uri`
}}
/>
```
### Asset Object from The Selection
```json
{
"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.