small slider horizontal list view oncamerawidget like whatsapp - react-native

Question

I have a react native app in which a user either has to click a photo or select a photo. When I select clicking a photo camera opens. I used a imagepicker for that
But I would like to add some widget on camera view itself like WhatsApp shows the image slideshow list view whenever we select camera. How can we draw on the camera and ability to choose the image from the small horizontal list view slideshow that is displayed on the camera view itself.
I was trying to build the same camera along with image selection from thousands of images
import React, {Component} from 'react';
import {Platform, StyleSheet, View, StatusBar, TouchableOpacity, FlatList, Image, ImageBackground} from 'react-native';
import { PermissionsAndroid, CameraRoll } from 'react-native';
//const Contner = createAppContainer(Routes);
export default class App extends Component
{
constructor(props) {
super(props);
z=[];
for (let i=0; i<500; i++)
{
z[i]=i;
}
this.z = z;
this.all_images={};
this.state={"images":{"edges":[]}};
}
async requestPhotosPermission() {
try
{
const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)
if (granted === PermissionsAndroid.RESULTS.GRANTED)
{
this.getPhotos();
} else
{
console.log("Photos permission denied")
}
} catch (err)
{
console.warn(err)
}
}
loadPhotos(){
var self=this;
const fetchParams = {
first: 1000000000,
assetType: 'Photos',
};
console.log("hellos");
CameraRoll.getPhotos(fetchParams).then((data) =>
{
console.log("length is ", data["edges"].length);
for (let j=0; j<data["edges"].length; j++)
{
this.all_images[j] = data["edges"][j]["node"]["image"]["uri"];
}
self.setState({"images":data});
}).catch((e) =>
{
console.log(e);
});
}
componentWillMount(){
this.requestPhotosPermission().then(()=>{
this.loadPhotos()
});
};
onViewableItemsChanged = ({ viewableItems, changed }) => {
// console.log("Visible items are", viewableItems[0],"to",viewableItems[viewableItems.length-1]);
// console.log("Changed in this iteration", changed);
};
render(){
console.log("finders");
let self=this;
return (
<FlatList
horizontal={true}
data={this.z}
renderItem={({item}) => {
console.log("item is ", item,self.state.images.edges.length);
// console.log(self.state.images.edges[0]);
if (self.state.images.edges.length!==0)
{
return <ImageBackground source={{uri: self.state.images.edges[item].node.image.uri}}
style={{height: 100, width: 100, margin: 4}}/>
}else
return <View style={{height:100,width:100,margin:4,borderWidth:1,backgroundColor:'#4a7642'}}/>
}}
onViewableItemsChanged={this.onViewableItemsChanged }
style={{borderWidth:3,borderColor:'red',height:'30%'}}
viewabilityConfig={{itemVisiblePercentThreshold: 50}}/>);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'black',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
padding: 15,
paddingHorizontal: 20,
alignSelf: 'center',
margin: 20,
},
});
I would like this list view to overlay on the normal Camera Widget