CODEWITHSUNDEEP
react-nativereact-navigation
bebo7
bebo7

Reputation: 3

Nested Lists using FlatList or SectionList

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?

Upvotes: 0

Views: 699

Answers (1)

David Scholz
David Scholz

Reputation: 9866

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.

Upvotes: 0

Related Questions