What Would Be The Best Way To Add The "Pick Image" Button To Expo Image Picker Flatlist?

Question

I've been working on a multiple image picker using Expo Image Picker and finally got most of it right, but I can't figure out the best way to add the button that lets the user pick an image from their media library

My code is as follows:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, Button, FlatList, Alert} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { useState } from 'react';

export default function App() {

  const [postImage, setPostImage] = useState([]);

  const pickImage = async () => {
    try{
    let result = await ImagePicker.launchImageLibraryAsync ({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsMultipleSelection: true,
      aspect: [ 1, 1 ],
      quality:1,
    });

    if (!result.canceled) {
      const selectedImageUris = result.assets.map ((asset) => asset.uri);
      setPostImage(selectedImageUris);
    }
  } catch (e) {
    Alert.alert("Error Uploading Image" + e.message);
  }
  }
  return (
    <View style={{display: 'flex', flex: 1, justifyContent: 'center',alignItems: 'center',    flexDirection:'row', position:'absolute'}}>
      <FlatList style 
        horizontal
        showsHorizontalScrollIndicator
        pagingEnabled
        bounces = {false}
        data={postImage}
        renderItem = {({ item }) => (
         <Image source = {{uri:item}} style = {{width: 340, height: 340, margin:10, marginBottom:200, position:'relative', alignItems:'center', justifyContent:'center'}}></Image>
        )}
        keyExtractor= {(item, index) => index.toString()}
         />
        </View>
  );
}

I've tried adding a ListFooterComponent (which resulted in the button being in the row), adding a view within the initial view and adding a new view below the first one (which resulted in error messages)

Answer 1

One way to add it is as ListFooterComponent. Then use ListFooterComponentStyle to style it. Something like this:

<FlatList
  horizontal
  showsHorizontalScrollIndicator
  pagingEnabled
  bounces={false}
  data={postImage}
  renderItem={({ item }) => (
    <Image
      source={{ uri: item }}
      style={{
        width: 340,
        height: 340,
        margin: 10,
        alignItems: 'center',
        justifyContent: 'center',
      }}></Image>
  )}
  keyExtractor={(item, index) => index.toString()}
  ListFooterComponent={
    <Button title="Pick image" onPress={() => pickImage()} />
  }
  ListFooterComponentStyle={{
    width: 340,
    height: 340,
    margin: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'lightgrey',
  }}
/>

Same way as a header use ListHeaderComponent and ListHeaderComponentStyle.