So far my code can save photos and videos to my device, and I have been able to get my camera roll saved photos to show on modal when I press an icon. But my main focus now is to get my camera roll saved videos to show on the modal instead of photos, and I have not been able to get it, please I need help on how to achieve it.
setIndex = (index) => {
if (index === this.state.index) {
index = null
}
this.setState({ index })
}
getPhotos = () => {
CameraRoll.getPhotos({
first: 20,
groupTypes: 'Album',
groupName: 'myCameraApp Photos',
assetType: 'Photos'
})
.then(r => this.setState({ photos: r.edges}))
}
// getVideos = () => {
// CameraRoll.getVideos({
// first: 20,
// groupTypes: 'Album',
// groupName: 'myCameraApp Videos',
// assetType: 'Videos'
// })
// .then(r => this.setState({ videos: r.edges}))
// }
toggleModal = () => {
this.setState({ modalVisible: !this.state.modalVisible})
}
share = () => {
const image = this.state.photos[this.state.index].node.image.uri
RNFetchBlob.fs.readFile(image, 'base64')
.then((data) => {
let shareOptions = {
title: "React Native Share Example",
message: "Check out this photo!",
url: `data:image/jpg;base64,${data}`,
subject: "Check out this photo!"
};
Share.open(shareOptions)
.then((res) => console.log('res:', res))
.catch(err => console.log('err', err))
})
}
// shareVideos = () => {
// const video = this.state.videos[this.state.index].node.video.uri
// RNFetchBlob.fs.readFile(video, 'base64')
// .then((data) => {
// let shareOptions = {
// title: "React Native Share Example",
// message: "Check out this photo!",
// url: `data:video/mp4;base64,${data}`,
// subject: "Check out this video!"
// };
// Share.open(shareOptions)
// .then((res) => console.log('res:', res))
// .catch(err => console.log('err', err))
// })
// }
render() {
return (
<View style={styles.container}>
<RNCamera
ref = {ref=>{
this.camera=ref;
}}
style={styles.preview}
flashMode={this.state.flashon}
type={this.state.backCamera ? RNCamera.Constants.Type.back : RNCamera.Constants.Type.front}
captureAudio={this.state.captureAudio}
androidCameraPermissionOptions={{
title: 'myCameraApp needs ermission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
>
{
({ camera, status, androidRecordAudioPermissionOptions }) => {
if (status !== 'READY') return <PendingView />
return (
<View style={styles.action}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, marginBottom: 15, alignItems: 'flex-end' }}>
<TouchableOpacity onPress={this.toggleTorch.bind(this)}>
{ this.state.flashon == RNCamera.Constants.FlashMode.off? (
<Icon
name="md-flash-off"
color="black"
size={30}
/>
) : (
<Icon
name="md-flash"
color="white"
size={30}
/>
)
}
</TouchableOpacity>
<View style={{ alignItems: 'center' }}>
<TouchableOpacity onPress={this.takePicture} style={styles.captureBtn} />
</View>
<View style={{ alignItems: 'center' }}>
<TouchableOpacity onPress={this.recordVideo} style={styles.captureVideoBtn}>
{
this.state.recording ?
(<Text>{this.secondsToMMSS(this.state.seconds)}</Text>) :
(null)
}
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={this.reverseCamera}
>
<Icon
name="md-reverse-camera"
color="white"
size={30}
/>
</TouchableOpacity>
</View>
</View>
)
}
}
</RNCamera>
<TouchableOpacity
style={styles.photoGalleryIcon}
onPress={() => { this.toggleModal(); this.getPhotos() }}
>
<Image
source={require('../images/photoGalleryIcon.png')}
/>
</TouchableOpacity>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => console.log('closed')}
>
<View style={styles.modalContainer}>
<Button
title='Close'
onPress={this.toggleModal}
/>
<ScrollView
contentContainerStyle={styles.scrollView}>
{
this.state.photos.map((p, i) => {
const isSelected = i === this.state.index;
const divide = isSelected && this.share === true ? 1 : 3;
return (
<TouchableHighlight
style={{opacity: i === this.state.index ? 0.5 : 1}}
key={i}
underlayColor='transparent'
onPress={() => this.setIndex(i)}
>
<Image
style={{
width: width/divide,
height: width/divide
}}
source={{uri: p.node.image.uri}}
/>
</TouchableHighlight>
)
})
}
</ScrollView>
{
this.state.index !== null && (
<View style={styles.shareButton}>
<Button
title='Share'
onPress={this.share}
/>
</View>
)
}
</View>
</Modal>