React native cannot display flat list - react-native

Question

I want to display the FlatList that I created. I want to show the title and artist that is in my data. There is no error but my output would not appear anything.
This is my data:
var track =
[
{ List: 'list1',
data:
[
{id: '1', url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',title: 'Despacito',artist:'Luis Fonsi'},
{id: '2', url: 'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',title: 'YoungBlood',artist:'5SOS'},
]
},
{ List: 'list2',
data:
[
{id: '1111', url: 'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',title: 'Summertime',artist:'Yelow Claw'},
{id: '2222', url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',title: 'Better Now',artist:'Post Malone'},
]},
];
module.exports = {track:track};
And this is my FlatList:
export default class SongList extends Component{
render(){
const { navigate } = this.props.navigation;
return(
<View>
<FlatList
data={track}
renderItem={({item,index})=>{
return(
<FlatListItem item={item} index={index}>
</FlatListItem>);
}}
>
</FlatList>
</View>
);
}
}
class FlatListItem extends Component{
render(){
return(
<View style={styles.list}>
<View>
<Text style={styles.itemTitle}>{this.props.item.title}</Text>
<Text style={styles.itemArtist}>{this.props.item.artist}</Text>
</View>
</View>
);
}
}
Basically I am able to run the program. But there is nothing showing up on the screen. There is only a blank background.
const styles = StyleSheet.create({
itemArtist:{
textAlign: 'center',
justifyContent: 'center',
fontSize: 23,
borderBottomWidth: 4,
borderBottomColor: '#ccc',
marginTop: 10,
padding: 10,
color: 'blue',
},
itemTitle:{
textAlign: 'center',
justifyContent: 'center',
fontSize: 23,
borderBottomWidth: 4,
borderBottomColor: '#ccc',
marginTop: 10,
padding: 10,
color: 'blue',
},
list:{
flex:1,
}

Answer 1

You should write your code as below:
Your data:
export default [
{
List: 'list1',
data: [
{
id: '1',
url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',
title: 'Despacito',
artist: 'Luis Fonsi',
},
{
id: '2',
url: 'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',
title: 'YoungBlood',
artist: '5SOS',
},
],
},
{
List: 'list2',
data: [
{
id: '1111',
url: 'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',
title: 'Summertime',
artist: 'Yelow Claw',
},
{
id: '2222',
url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',
title: 'Better Now',
artist: 'Post Malone',
},
],
},
];
Import your data like this, I assume the data file and your code are in a same folder:
import track from './data';
Your components:
export default class App extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<FlatList
data={track}
renderItem={({ item, index }) => {
return <FlatListItem item={item} index={index} />;
}}
/>
</View>
);
}
}
class FlatListItem extends Component {
render() {
return (
<View style={styles.list}>
<View>
<Text style={styles.itemTitle}>{this.props.item.data[0].title}</Text>
<Text style={styles.itemArtist}>{this.props.item.data[0].artist}</Text>
</View>
<View>
<Text style={styles.itemTitle}>{this.props.item.data[1].title}</Text>
<Text style={styles.itemArtist}>{this.props.item.data[1].artist}</Text>
</View>
</View>
);
}
}
And if you want to show only the data of list1 in your FlatList you should change your code as below:
export default class App extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<FlatList
data={track[0].data}
renderItem={({ item, index }) => {
return <FlatListItem item={item} index={index} />;
}}
/>
</View>
);
}
}
class FlatListItem extends Component {
render() {
return (
<View style={styles.list}>
<View>
<Text style={styles.itemTitle}>{this.props.item.title}</Text>
<Text style={styles.itemArtist}>{this.props.item.artist}</Text>
</View>
</View>
);
}
}
You can make your data schema better to show them better too.

Answer 2

Steps to debug :-
try to console track, check if data is coming properly.
add console in componentDidMount and check if item if coming there or not.
Add keyExtractor in flatlist, keyExtractor tells the list to use the ids for the react keys instead of the default key property.
<FlatList
data={track}
keyExtractor={(item, index) => ""+index}
renderItem={({ item, index }) => {
return <FlatListItem item={item} index={index} />;
}}
/>