List view

Easy to create List View

Building List View is very easy using Nano, Nano uses recyclerlistview package internally to list items.

Below is the simple example to create list view.

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",
    value: '',
    props: {
        style: {
            fontSize: 16,
            paddingVertical: 5,
            paddingHorizontal: 15,
            height: 50,
            textAlignVertical: 'center',
        },
    },
};

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

};

And add the above list component to screen like below.

const screen = {
    name: "Hellow World",
    screen: {
        v1: [list],
    },
    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.