Nested Lists using FlatList or SectionList - react-native

Question

Heres my problem. I need to use react navigator to enter a new page with the appropriate data from a FLatList or SectionList using route.params.
Normally that would be no problem for me, but I want a more complex list with new lists in the list (Ideally using json in the future). I want to make a List that displays and sort animals into categories in a listed format. When you touch the desired animal you're forwarded to a page displaying info and facts aboat that animal.
The list of data looks like this (its shortend, but this is the template):
const species= [
{
title: 'SpeciesGroup1',
data: [
{
id: 1,
title: 'Species1',
}
],
},
{
title: 'SpeciesGroup2',
data: [
{
id: 1,
title: 'Species2',
}
],
},
];
This is the screen that diplays the data. AppList is a FlatList component. Everything is displayed as I want it. I've also tried using SectionList and that worked too.
import React from 'react';
import {
StyleSheet,
View,
FlatList,
} from 'react-native';
import AppList from '../components/AppList';
import AppText from '../components/AppText';
import Screen from '../components/Screen';
import routes from '../navigation/routes';
function SpeciesListScreen({ navigation }) {
return (
<Screen>
<FlatList
data={ species }
renderItem={({ item }) => (
<View style={ styles.container }>
<AppText textType='header'>{ item.title }</AppText>
<AppList items={item.data} onPress={ () => navigation.navigate( routes.SPECIES, item.data )} numberOfColumns={ 2 } />
</View>
)}
/>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
}
});
export default SpeciesListScreen;
Until now eveything works and loads as it should. The problem comes when i want to display the information in the SpeciesScreen. For some reason I can't access the info in the data array, in this case "title". The page loads perfectly fine. Just without the data.
The screen showing the species info looks like this:
import React from 'react';
import {
StyleSheet,
View,
FlatList,
} from 'react-native';
import AppText from '../components/AppText';
import Screen from '../components/Screen';
function SpeciesScreen({ route }) {
const animal = route.params;
return (
<Screen>
<AppText textType='header'>{ animal.title }</AppText>
</Screen>
);
}
export default SpeciesScreen;
Does anyone have any tips or solutions?

Answer 1

The way you pass the route params is incorrect. The route params are supposed to be an object, but item.data is an array.
You can correct this as follows.
<AppList items={item.data} onPress={ () => navigation.navigate( routes.SPECIES, { species: item.data} )} numberOfColumns={ 2 } />
You can access them as follows.
const animal = route.params.species[0]
If you know that this will always be just one object, you could do this as a preprocessing and just pass the object to the route params. If you got multiple objects, then you might want to loop over it.