How can I add a button inside flatlist, whenever I tried to add a button then I am getting multiple buttons inside flatlist.

I want only one button which is scrollable with flatlist.

and if I add a button outside flatlist then it's not scrolling, it get fixed below the flatlist, only flatlist data scroll but the button not scroll with flatlist. How can I solve this issue? Really appreciate your support.

import React, { useState, useEffect } from 'react';
import {View, Button, Text, FlatList, StyleSheet, Pressable, TouchableOpacity} from 'react-native'
import {firebase} from '../config';

const Testing = ({ navigation }) =>{
    const [users, setUsers] = useState([]);
    const todoRef = firebase.firestore().collection('testing');
  useEffect(() => {
        todoRef.onSnapshot(
            querySnapshot => {
                const users = []
                querySnapshot.forEach((doc) => {
                    const { one, two, three, four, five
              
                    } = doc.data()
                    users.push({
                        id: doc.id,
                        one, two, three, four, five
                      
                    })
                })
                setUsers(users)
            }
        )
    }, [])
return (
<View style={{ flex:1,}}>
   <FlatList 
  style={{height: '100%'}}
  data={users}
  numColumns={1}
  renderItem={({item}) => (
    <Pressable>

<View>
  <View>
    <Text style={[styles.card, styles.surah]}>{item.one}</Text>

    <Text style={styles.card}>{item.two}</Text>
    <Text style={styles.text}>{item.three}</Text>

    <Text style={styles.cardTwo}>{item.four}</Text>
    <Text style={styles.text}>{item.five}</Text>
</View>
  

         </View>
   
//  I tried to add here button but it's not worked 
    </Pressable>
     )}/>
  //  I also tried to add here button but it's not worked 
    </View>
    );}
    export default Testing;

CodePudding user response：

You could implement this with the help of the index parameter of the renderItem function.

renderItem={({item, index}) => (
 
   <View>
      <View>
        <Text style={[styles.card, styles.surah]}>{item.one}</Text>
        <Text style={styles.card}>{item.two}</Text>
        <Text style={styles.text}>{item.three}</Text>
        <Text style={styles.cardTwo}>{item.four}</Text>
        <Text style={styles.text}>{item.five}</Text>
      </View>
      { 
        index === users.length - 1 && <Pressable onPress={...}>...</Pressable>
      }
   </View>
)}

The above adds a component, in this case a Pressable at the end of the last item. If you want the last item to be pressable, then you can achieve this using the same pattern, but by wrapping the last component inside a pressable.

const InnerComponent = () => {
 return <View>
        <Text style={[styles.card, styles.surah]}>{item.one}</Text>
        <Text style={styles.card}>{item.two}</Text>
        <Text style={styles.text}>{item.three}</Text>
        <Text style={styles.cardTwo}>{item.four}</Text>
        <Text style={styles.text}>{item.five}</Text>
      </View>
}
...
renderItem={({item, index}) => (
 
   <View>
      { 
        index === users.length - 1 ? <Pressable onPress={...}>
          <InnerComponent />
       </Pressable> : <InnerComponent />
      }
   </View>
)}