Skip to main content
Version: 1.0.113

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 = {
name: "text_name",
component: "text",
value: '',
props: {
style: {
fontSize: 16,
paddingVertical: 5,
paddingHorizontal: 15,
height: 50,
textAlignVertical: 'center',
},
},
onPress: ({ setUi, getUi, componentParams, moduleParams }) => {
// componentParams gives you specific parameters like 'index', 'itemJson', 'itemData', 'listData'
const index = componentParams["index"]
const itemJson = componentParams["itemJson"]
const itemData = componentParams["itemData"]
const listData = componentParams["listData"]


}

};


const textView = {
name: "text_view",
component: "view",
content: [textComponent],
props: {

},
};



const list = {
component: "flat_list",
listData: itemData,
mapper: (data) => {
return {
text_name: {
value: data["item_name"]
}
}
},
itemView: textView,
itemHeight: 50,
itemWidth: null,
uniqueKey: (data) => data["item_name"]
};

And add the above flat 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.