Skip to main content
Version: 1.0.110

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.