Flat list

Easy to create Falt List

Building Flat List is very easy using Nano,

Below is the simple example to create flat list.

const itemData = [
    { item_name: "Item 1" },
    { item_name: "Item 2" },
    { item_name: "Item 3" },
    { item_name: "Item 4" },
    { item_name: "Item 5" },
    { item_name: "Item 6" }
];

const textComponent = {
    component: "text",
    name: "item",
    value: '',
    props: {
        style: {
            fontSize: 16,
            paddingVertical: 5,
            paddingHorizontal: 15,
            height: 50,
            textAlignVertical: 'center',
        },
    },
};

const flatList = {
    component: "flat_list",
    data: itemData,
    mapper: (data) => {
        return {
            value: data["item_name"]
        }
    },
    itemView: textComponent,
    itemHeight: 50,
    itemWidth: null,
    onPress: ({ setUi, getUi, componentParams, moduleParams }) => {
        // componentParams gives you specific parameters like 'index', 'itemJson', 'itemData', 'listData'
        console.log(componentParams)

    }

};

And add the above flat list component to screen like below.

const screen = {
    name: "Hellow World",
    screen: {
        v1: [flatList],
    },
    screenProps: {
        "options": {
            "headerShown": false
        }
    },
    style: { justifyContent: "center", flex: 1, alignItems: "center", backgroundColor: "white" }
};

That's it, Now you will see the data items displayed in vertical list.