flatlist

[beyons]

hi our example about flat list and list view doesn't work each child in the list should have a unique key this is a message how can i add this in your flat list or listview solution

and how can i add a view(text and image and button) in every item thank you

[sandeshnaroju]

Thanks for question, you can use unqiueKey in list view/ flat list to add uniqueKey like below.

const list = {
    component: "list_view",
    listData: itemData,
    mapper: (data) => {
        return {
            title: {
                value: data["full_name"],
            },
            subtitle: {
                value: data["location"],
            },
            cover: {
                props: {
                    source: data["cover_image"]
                }
            },
            book_now: {
                value: "Book",
            },
            rating: {
                value: "⭐ " + data["rating"],
            },
            card_avatar_image: {
                value: data["profile_image"],
            }
        }
    },
    itemView: cardView,
    itemHeight: 320,
    itemWidth: null,
    uniqueKey: (data) => data["full_name"],
    props: {
        contentContainerStyle: {
            marginTop: 10,
            paddingBottom: 300
        },
        showsVerticalScrollIndicator: false
    }
};

Here is a simple example of list view, i copy pasted from my local project. So you will get an idea how you can work with list_view. there is a content option that is provided in VIEW and CARD, where you can add children to them.

import { NANO } from 'react-native-nano'

const itemData = [
    { profile_image: require("./../../../assets/images/sample-users/1.jpeg"), cover_image: require("./../../../assets/images/sample-covers/1.jpg"), full_name: "Naroju Sandesh", location: "Hyd, India", price: "3 Lakh", rating: "4.8" },
    { profile_image: require("./../../../assets/images/sample-users/2.jpeg"), cover_image: require("./../../../assets/images/sample-covers/2.jpg"), full_name: "Mahesh Srilingam", location: "Chennai, India", price: "1.9 Lakh", rating: "4.2" },
    { profile_image: require("./../../../assets/images/sample-users/3.jpeg"), cover_image: require("./../../../assets/images/sample-covers/3.jpg"), full_name: "Supriya Boopathi", location: "Delhi, India", price: "1.6 Lakh", rating: "4.1" },
    { profile_image: require("./../../../assets/images/sample-users/4.jpeg"), cover_image: require("./../../../assets/images/sample-covers/4.jpg"), full_name: "Ramesh Chandra", location: "Banglore, India", price: "1.3 Lakh", rating: "4.4" },
    { profile_image: require("./../../../assets/images/sample-users/5.jpeg"), cover_image: require("./../../../assets/images/sample-covers/5.jpg"), full_name: "Sachin Sarakr", location: "Tamilnadu, India", price: "1.1 Lakh", rating: "4.3" },
    { profile_image: require("./../../../assets/images/sample-users/6.jpeg"), cover_image: require("./../../../assets/images/sample-covers/6.jpg"), full_name: "Sanjay dube", location: "Gurugram, India", price: "1.7 Lakh", rating: "3.8" },
    { profile_image: require("./../../../assets/images/sample-users/7.jpeg"), cover_image: require("./../../../assets/images/sample-covers/7.jpg"), full_name: "Lingam tech", location: "Vijayawada, India", price: "2 Lakh", rating: "4.9" },
    { profile_image: require("./../../../assets/images/sample-users/8.jpeg"), cover_image: require("./../../../assets/images/sample-covers/8.jpg"), full_name: "Mellesh Jayam", location: "Warangal, India", price: "1.3 Lakh", rating: "5.0" },
    { profile_image: require("./../../../assets/images/sample-users/9.jpeg"), cover_image: require("./../../../assets/images/sample-covers/9.jpg"), full_name: "Srilekha Singam", location: "Maharashtra, India", price: "1 Lakh", rating: "3.5" },
    { profile_image: require("./../../../assets/images/sample-users/10.jpeg"), cover_image: require("./../../../assets/images/sample-covers/10.jpg"), full_name: "Jaya Shankar", location: "Gujarat, India", price: "1.5 Lakh", rating: "3.3" },

];

const cardTitle = {
    component: NANO.TEXT,
    name: "title",
    value: "xxx",
    props: {
        style: {
            color: "black",
            fontSize: 16,
            fontWeight: "bold",
        },
    }
};
const cardSubTitle = {
    component: NANO.TEXT,
    name: "subtitle",
    value: "",
    props: {
        style: {
            color: "grey",
            fontSize: 14,
            fontWeight: "normal",
        },
    }
};

const cardProfileTextView = {
    name: "profile_text__view",
    component: NANO.VIEW,
    content: [cardTitle, cardSubTitle],
    props: {
        style: {
            marginLeft: 10
        },
    }
}

const cardAvatarImage = {
    name: "card_avatar_image",
    component: NANO.IMAGE,
    value:
        '',
    props: {
        style: {
            height: 50,
            width: 50,
            backgroundColor: 'teal',
            borderRadius: 50
        }
    }
};
const cardProfileView = {
    name: "profile_view",
    component: NANO.CARD_CONTENT,
    content: [cardAvatarImage, cardProfileTextView],
    props: {
        style: {
            flexDirection: "row",
            alignItems: "center",
            marginTop: 10,
        },
    }
}

const cardCover = {
    component: NANO.CARD_COVER,
    name: "cover",
    value: "",
    props: {
        style: {

        },
    }
};
const bookNow = {
    component: NANO.BUTTON,
    name: "book_now",
    value: 'Book',
    props: {
        width: 100,
        style: {
            backgroundColor: 'green',
        },
        color: "white",
    }
};

const ratingText = {
    component: NANO.TEXT,
    name: "rating",
    value: '',
    props: {
        style: {
        },
    }
};

const cardAction = {
    component: NANO.CARD_ACTION,
    name: "action",
    content: [ratingText, bookNow],
    props: {
        style: {
            justifyContent: "space-between",
        },
    }
};

const cardView = {
    name: "card_view",
    component: NANO.CARD,
    content: [cardCover, cardProfileView, cardAction],
    props: {
        style: {
            borderRadius: 10,
            marginHorizontal: 10,
            marginBottom: 10
        },
    }
};

const list = {
    component: "list_view",
    listData: itemData,
    mapper: (data) => {
        return {
            title: {
                value: data["full_name"],
            },
            subtitle: {
                value: data["location"],
            },
            cover: {
                props: {
                    source: data["cover_image"]
                }
            },
            book_now: {
                value: "Book",
            },
            rating: {
                value: "⭐ " + data["rating"],
            },
            card_avatar_image: {
                value: data["profile_image"],
            }
        }
    },
    itemView: cardView,
    itemHeight: 320,
    itemWidth: null,
    uniqueKey: (data) => data["full_name"],
    props: {
        contentContainerStyle: {
            marginTop: 10,
            paddingBottom: 300
        },
        showsVerticalScrollIndicator: false
    }
};

const home = {
    name: 'HomeScreen',
    screen: {
        v1: [list],
    },
    screenProps: {
        options: {
            headerShown: false
        }
    },
    style: { justifyContent: 'center', flex: 1 },
};

export default home;