небольшой слайдер горизонтальный список просмотра на сайте виджет как WhatsApp

Question

У меня есть собственное приложение, в котором пользователь должен щелкнуть фотографию или выбрать фотографию.При выборе щелчка открывается фотоаппарат.Я использовал для этого средство выбора изображений

Но я бы хотел добавить виджет на само изображение камеры, например, WhatsApp показывает представление списка слайд-шоу изображений всякий раз, когда мы выбираем камеру.Как мы можем нарисовать на камере и как выбрать изображение из слайд-шоу с небольшим горизонтальным списком, которое отображается на самом виде с камеры.

Я пытался построить ту же камеру вместе с выбором изображений из тысяч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,
    },
});

Я бы хотел, чтобы этот список отображался поверх обычного виджета камеры