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 = {
  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: "list_view",
  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 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.