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&q
