Detailed Explanation on how to use ListView renderSectionHeader

Question

const users = 

    [

        {
          name: "Joy soap",
          customerName: "Salomy",
          date: "19 March 2018",
          time: "08:46am",
          amount: 3000,
          status: "paid",
          number: 24,
          images:
            "https://snack1.amazonaws.com/~asset/9d799c33cbf767ffc1a72e53997218f7"
        },
        {
          name: "Closeup tooth paste",
          customerName: "Salomy",
          date: "19 March 2018",
          time: "08:46am",
          amount: 3000,
          status: "paid",
          number: 20,
          images:
            "https://1.amazon4d99c3d76575cc03c2a7f816280"
        },
        {
          name: "Iman Powder",
          customerName: "Emanbe",
          date: "20 March 2018",
          time: "11:25am",
          amount: 3000,
          status: "paid",
          number: 12,
          images:
            "https://1.amazonaws.com/~asset/ee06c63d01543a44631c3421df6ee5fa"
        },
        {
          name: "John Bellion",
          customerName: "Okonkwo Chioma",
          date: "20 March 2018",
          time: "08:46am",
          amount: 3000,
          status: "paid",
          number: 3,
          images:
            "https://sn1.amazonaws.com/~asset/ee06c63d01543a44631c3421df6ee5fa"
        }
      ];

Please I have an array of objects like the above that I want to render in a ListView with a Section Header function pointing to user.date... I want it to render a list of all the items on 19 March 2018, and then render the items on 20 March 2018 under the header also.
I have used ListView several times but I have never been able to use the section header in this way with the above arrays of object. Please a detailed explanation would be greatly appreciated. I know its probably a simple task to some of you but please be kind. I need a renderSectionHeader() function that can organize the data with respect to their dates so I can render it in my listview like this

`<ListView
            ref={ref => (this.scrollView = ref)}
            onContentSizeChange={() => {
              this.scrollView.scrollToEnd({ animated: false});
            }}
            dataSource={this.state.userDataSource}
            renderRow={this.renderRow.bind(this)}
            renderSectionHeader={this.renderSectionHeader.bind(this)}
          />`

An example of what I want is here but I want to know how it can be done with the above array

Answer 1

ListView is no longer available in React-Native. You can use FlatList. Its very simple then ListView as well.

1) Import FlatList from react-native:

import { FlatList } from 'react-native';

2) Copy Below code into your render() method.

         <FlatList
                horizontal={true/false}
                style={YOUR_COSTOM_STYLE}
                data={YOUR_ARRAY}
                renderItem={this.renderItem.bind(this)}
                keyExtractor={(item, index) => String(index)}
            />

3) You do necessary stuff for your cell in renderItem method.

// Render Methods
    renderItem({ item }) {
        return (
            // DO_YOUR_STUFF
        );
    }

You can more detail about FlatList from here. One more example for header in FlatList