How to re-render React Native FlatList on Touchable press?

Question

Hi all ,

I'm building a frontend for my Node API (listing, uploading, deleting and playing files) and I'm trying to get a FlatList to re-render when a button (TouchableOpacity) is pressed , which will contain the list of files I get back from the API in the future.

From what I understand after reading several example codes and threads, a state variable needs to be passed in the FlatList's extraData option and when this variable is updated, the List should re-render.

I obviously missed something, because my implementation of this "system" doesn't work and I'd really appreciate if someone could guide me in the right direction.

My code:

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
    View,
    SafeAreaView,
    FlatList,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
} from "react-native";

let DATA = [
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "0"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "1"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "2"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "3"
    },
];

const Item = ({ title }) => (
    <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
    </View>
);

export default function App() {
    const renderItem = ({ item }) => <Item title={item.title} />;

    const [newData, setNewData] = useState(null);

    const onRefresh = () => {
        let new_data = [];
        for (let i in DATA) {
            new_data.push({
                title: DATA[i].title + " NEW",
                key: DATA[i].key
            });
        }
        setNewData(new_data);
        //console.log(new_data);
    }

    return (
        <SafeAreaView style={styles.container}>

            <FlatList style={styles.list_wrapper}
                data={DATA}
                extraData={newData}
                renderItem={renderItem}
                keyExtractor={(item, index) => item.key}
            />

            <SafeAreaView style={styles.btn_wrapper}>
                <TouchableOpacity style={styles.refreshBtn} activeOpacity={1} onPress={onRefresh}>
                    <Image
                        source={require('./assets/refresh.png')}
                        style={styles.refresh}
                    />
                </TouchableOpacity>
            </SafeAreaView>
        </SafeAreaView>
    );
}

I didn't include the styles part, please tell me if I should have.

Thanks in advance!

Answer 1

If you want the FlatList to show the data you just added you should set the hardcoded data as your initial state and manipulate it as you want.

 import { StatusBar } from "expo-status-bar"; import React, { useState } from "react"; import { View, SafeAreaView, FlatList, StyleSheet, Text, Image, TouchableOpacity, } from "react-native"; let DATA = [ { title: 'Gojira - Magma (Official Audio).mp3', key: "0" }, { title: 'Gojira - Magma (Official Audio).mp3', key: "1" }, { title: 'Gojira - Magma (Official Audio).mp3', key: "2" }, { title: 'Gojira - Magma (Official Audio).mp3', key: "3" }, ]; const Item = ({ title }) => ( <View style={styles.item}> <Text style={styles.title}>{title}</Text> </View> ); export default function App() { const renderItem = ({ item }) => <Item title={item.title} />; const [newData, setNewData] = useState(DATA); const onRefresh = () => { let new_data = []; for (let i in DATA) { new_data.push({ title: DATA[i].title + " NEW", key: DATA[i].key }); } setNewData(new_data); //console.log(new_data); } return ( <SafeAreaView style={styles.container}> <FlatList style={styles.list_wrapper} data={newData} renderItem={renderItem} keyExtractor={(item, index) => item.key} /> <SafeAreaView style={styles.btn_wrapper}> <TouchableOpacity style={styles.refreshBtn} activeOpacity={1} onPress={onRefresh}> <Image source={require('./assets/refresh.png')} style={styles.refresh} /> </TouchableOpacity> </SafeAreaView> </SafeAreaView> ); }