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],
    },
    props: {
        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.