title: React Native SectionList/ListView view desc sort order not maintained
body: <p>I guess this is more like understanding of javascript sorting or how sections are rendered in SectionList or ListView. I have a data source where I need to display the results in desc order of ageGroup. My row object has like:</p>
  
  <pre><code>[{name: 'Saurabh', ageGroup:'1'}, {name: 'John', ageGroup:'0'}]
  </code></pre>
  
  <p>When I sort it desc order by ageGroup I can see the sorting correctly but when I pass this sorted array to section headers sort order is lost. However, this works perfectly if I change ageGroup to characters instead of numbers say replacing 0 by A and 1 by B.
  Here is my code so far - earlier I tried ListView with sectionHeaders, later changed it to SectionList but it is not working either way. How can I render my list elements in descending order of ageGroup?</p>
  
  <p>Here is my code :</p>
  
  <pre><code>import React, {
    Component
  } from 'react';
  import {
    Text,
    SectionList
  } from 'react-native';
  
  import _ from 'lodash';
  
  let dataSource = [{
      name: 'Saurabh',
      ageGroup: '1'
    },
    {
      name: 'John',
      ageGroup: '0'
    },
    {
      name: 'Alex',
      ageGroup: '1'
    },
  ]
  
  // let dataSource = [{
  //     name: 'Saurabh',
  //     ageGroup: 'B'
  //   },
  //   {
  //     name: 'John',
  //     ageGroup: 'A'
  //   },
  //   {
  //     name: 'Alex',
  //     ageGroup: 'B'
  //   },
  // ]
  
  
  dataSource = _.orderBy(dataSource, ['ageGroup'], ['desc']);
  // dataSource = dataSource.sort((a,b) =&gt; b-a);
  
  console.log('dataSource: ' + JSON.stringify(dataSource));
  
  dataSource = _.groupBy(dataSource, d =&gt; d.ageGroup);
  dataSource = _.reduce(dataSource, (acc, next, index) =&gt; {
    acc.push({
      key: index,
      data: next
    })
    return acc
  }, []);
  console.log('dataSource: ' + JSON.stringify(dataSource));
  
  export default class SectionListExample extends Component {
    constructor(props) {
      super(props);
      this.renderItem = this.renderItem.bind(this);
      this.renderSectionHeader = this.renderSectionHeader.bind(this);
    }
  
  
    renderItem(item) {
      return ( &lt;
        Text style = {
          {
            fontSize: 14,
            color: 'blue'
          }
        } &gt; {
          item.item.name
        } &lt; /Text&gt;
      );
    }
  
  
    renderSectionHeader(headerItem) {
      return ( &lt;
        Text style = {
          {
            fontSize: 20,
            fontWeight: '700',
            color: 'gray'
          }
        } &gt; {
          headerItem.section.key
        } &lt; /Text&gt;
      );
    }
  
  
    render() {
  
      return ( &lt;
        SectionList renderItem = {
          this.renderItem
        }
        renderSectionHeader = {
          this.renderSectionHeader
        }
        sections = {
          dataSource
        }
        keyExtractor = {
          (item) =&gt; item.name
        }
        removeClippedSubviews = {
          false
        }
        style = {
          {
            flex: 1,
            marginTop: 100
          }
        }
        /&gt;
      );
    }
  }
  </code></pre>