React Native FlatList not rendering items from array

Question

I've gone through the docs and can't seem to get FlatList to render items. Through console logs etc I've determined that the problem is definitely with FlatList.

I've a simple component that fetches an array of user's tracks (location points). That part all works fine, because the console.log prints all the locations correctly and I can display a random object from the array eg tracks[1].name etc. However, when I try to render all of the track objects via FlatList, nothing is displayed, I've tried the extraData prop. and adding Flex etc to ensure FlatList has a width and height: Here's the component:

import React, { useContext, useEffect } from "react"
import { StyleSheet, Text, Button, FlatList, TouchableOpacity } from "react-native"
import TrackContext from "../context/TrackContext"
import { ListItem } from "react-native-elements"


const TrackListScreen = ({ navigation }) => {

    // fetchTracks function adds array of data to state (tracks) 
    const { tracks, fetchTracks } = useContext(TrackContext)

    React.useEffect(() => {
        const unsubscribe = navigation.addListener('focus', () => {
            fetchTracks()
        });
        return unsubscribe;
    }, [navigation]);

    console.log(tracks) // THIS CORRECTLY PRINTS AN ARRAY OF OBJECTS
    return <>
        <Text style={{ fontSize: 48 }}>TrackListScreen</Text>
        {tracks.length ? (<>
            <Text>{tracks[0].name}</Text> // **THIS DISPLAYS ON SCREEN FINE**
            <FlatList
                style={styles.flatList}
                keyExtractor={item => item._id}
                data={tracks}
                renderItem={({ item }) => {
                  return <Text>{item.name} </Text> **//THIS DOES NOT DISPLAY**
                }}
                extraData={tracks}
            />
        </>) : null}
    </>
}

const styles = StyleSheet.create({
    flatList: {
        flex: 1,
        borderColor: "red",
        borderWidth: 4
    },
    listItem: {
        width: 900,
        height: 900,
        color: "black",
        borderColor: "blue",
        borderWidth: 4
    }
})

export default TrackListScreen

Here's what that console log prints out:

Array [
  Object {
    "__v": 0,
    "_id": "5ff975b50d1ac007b45906c9",
    "locations": Array [
      Object {
        "_id": "5ff975b50d1ac007b45906ca",
        "coords": Object {
          "accuracy": 64,
          "altitude": 8.919908795971608,
          "heading": -1,
          "latitude": 54.66434256672557,
          "longitude": -5.637025996311907,
          "speed": 0.8577787280082703,
        },
        "timestamp": 1610184104504.8586,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906cb",
        "coords": Object {
          "accuracy": 32,
          "altitude": 3.445790863037111,
          "heading": -1,
          "latitude": 54.6643316753395,
          "longitude": -5.63689510684715,
          "speed": 0.019007805734872818,
        },
        "timestamp": 1610184105515.2598,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906cc",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.665740781677194,
          "longitude": -5.635617909864419,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906cd",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6658407816772,
          "longitude": -5.6355179098644195,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906ce",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6659407816772,
          "longitude": -5.63541790986442,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906cf",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6660407816772,
          "longitude": -5.63531790986442,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906d0",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6661407816772,
          "longitude": -5.635217909864419,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906d1",
        "coords": Object {
          "accuracy": 32.00483309472351,
          "altitude": 9.52780975341797,
          "heading": -1,
          "latitude": 54.66438883459561,
          "longitude": -5.63704615479824,
          "speed": 0.4152008891105652,
        },
        "timestamp": 1610184110513.6274,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906d2",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.666240781677196,
          "longitude": -5.6351179098644195,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906d3",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6663407816772,
          "longitude": -5.63501790986442,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff975b50d1ac007b45906d4",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.666440781677196,
          "longitude": -5.634917909864419,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
    ],
    "name": "Test hike",
    "userId": "5fee4ac20d1ac007b45906c7",
  },
  Object {
    "__v": 0,
    "_id": "5ff9d5c20d1ac007b45906d5",
    "locations": Array [
      Object {
        "_id": "5ff9d5c20d1ac007b45906d6",
        "coords": Object {
          "accuracy": 65,
          "altitude": 8.55748176574707,
          "heading": -1,
          "latitude": 54.66434516098353,
          "longitude": -5.6370418752478075,
          "speed": -1,
        },
        "timestamp": 1610208693218.3508,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906d7",
        "coords": Object {
          "accuracy": 65,
          "altitude": 8.55748176574707,
          "heading": -1,
          "latitude": 54.66434516098353,
          "longitude": -5.6370418752478075,
          "speed": -1,
        },
        "timestamp": 1610208698112.293,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906d8",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6705407816772,
          "longitude": -5.63081790986442,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906d9",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6706407816772,
          "longitude": -5.630717909864419,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906da",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.670740781677196,
          "longitude": -5.630617909864419,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906db",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6708407816772,
          "longitude": -5.63051790986442,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906dc",
        "coords": Object {
          "accuracy": 64,
          "altitude": 3.615227508544926,
          "heading": -1,
          "latitude": 54.664237740674885,
          "longitude": -5.636843777656393,
          "speed": 0.7907719016075134,
        },
        "timestamp": 1610208701664.723,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906dd",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.670940781677196,
          "longitude": -5.63041790986442,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906de",
        "coords": Object {
          "accuracy": 32,
          "altitude": 3.855814361572264,
          "heading": -1,
          "latitude": 54.664249383327544,
          "longitude": -5.636888495043056,
          "speed": 0.7547370791435242,
        },
        "timestamp": 1610208702713.8047,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906df",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.6710407816772,
          "longitude": -5.630317909864419,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
      Object {
        "_id": "5ff9d5c20d1ac007b45906e0",
        "coords": Object {
          "accuracy": 5,
          "heading": 0,
          "latitude": 54.671140781677195,
          "longitude": -5.630217909864419,
          "speed": 0,
        },
        "timestamp": 100000000,
      },
    ],
    "name": "Walking",
    "userId": "5fee4ac20d1ac007b45906c7",
  },
]

Can't understand what I've done wrong! Thanks

Answer 1

I guess there is problem with your parsing. Can you try one thing. Print the length of your tracks array I guess your k

 keyExtractor={item => item._id}

is having a problem can you please debug it.

Answer 2

Randomly started working perfectly, with exact same code as above. Weird. Not sure what hte cause of this was. Good tip for debugging using the console.log(item) in the renderItem function or alternatively could print out {JSON.stringify(item)}, If it doesnt show data then response may be empty or it might be in wrong format.