MediaHelper component for React native, supports both android and ios.
currently, react native camera roll is not supported get thumbnail video from camera roll. So this module support gets thumbnail video and photo. it depends on react-native-thumbnail
and react-native-get-real-path
library to complete android module
npm install react-native-media-helper --save
then link
import MediaHelper from 'react-native-media-helper'
<MediaHelper
numPhotos={20} // just for android
numVideos={20} // just for android
media='All' // just for ios
num={20} // just for ios
onCancel={() => this.setState({visible: false})}
onSelectedItem={(item) => alert(JSON.stringify(item))}
/>
Ios
{
"node": {
"timestamp": 1509173491,
"location": {},
"group_name": "Camera Roll",
"type": "ALAssetTypePhoto",
"image": {
"width": 640,
"height": 640,
"isStored": true,
"filename": "cat.jpg",
"uri": "assets-library://asset/asset.JPG?id=BD2F9143-CAD6-476A-8875-DF91AF6401A5&ext=JPG",
"playableDuration": 0,
"thumbnailUrl": "assets-library://asset/asset.JPG?id=BD2F9143-CAD6-476A-8875-DF91AF6401A5&ext=JPG"
}
}
}
Android
{
"node": {
"timestamp": 1523171768,
"group_name": "thumb",
"type": "image/jpeg",
"image": {
"height": 320,
"width": 240,
"uri": "content://media/external/images/media/2222",
"thumbnailUrl": "content://media/external/images/media/2222"
}
}
}
Property | Type | default | Description |
---|---|---|---|
numPhotos | PropTypes.number | 10 | just for Android number of Photo |
numVideos | PropTypes.number | 10 | just for Android number of Video |
getPhotos | PropTypes.bool | true | just for Android allow get photo |
getVideos | PropTypes.bool | true | just for Android allow get video |
media | PropTypes.string | All | just for Ios String: All , Photos , Videos |
num | PropTypes.number | 20 | just for Ios number item |
imageMargin | PropTypes.number | 5 | Margin size of one image. |
imagesPerRow | PropTypes.number | 3 | Number of images per row. |
headerMid | PropTypes.string | 'Select Items' | Text header mid |
headerLeftButton | PropTypes.string | 'Cancel' | Text header left button |
headerRightButton | PropTypes.string | 'Done' | Text header right button |
onCancel | PropTypes.func | () => {} | Function cancel |
onSelectedItem | PropTypes.func | () => {} | Function selected item |