React Native - FlatList ordering without sorting data

Question

Is there a way to render Flatlist rows in a certain order without sorting the data source?

Example

<FlatList
  data={[{key: 'a'}, {key: 'c'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

The above code renders a list

a
c
b

Is there a way to get it to render the following without sorting the data source?

a
b
c

I would say NO. What is the standard/creteria for your desired output? It is sorted by alphabet, right? — David, Jul 21 '17 at 05:36
This is simpler example for the real problem I am facing. I have a data source in a [normalized state](http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html) so all my objects are referenced by id. I want to display the list in an order other than id without having to sort the entire thing, which could be large. — alexdriedger, Jul 21 '17 at 05:46

David · Accepted Answer · 2017-07-21T06:14:31.310

Basically you are saying, I want Pizzar, but do not use sausage, meat, whatever. The answer is therefore No.

In order to perform efficient sorting and ordering, you can try linq.js

linq.js, in short is LINQ for JavaScript. Some particular useful/pertinent features include:

implement all .NET 4.0 methods and many extra methods (inspiration from Rx, Achiral, Haskell, Ruby, etc...)
complete lazy evaluation
binding for Reactive Extensions for JavaScript(RxJS) and IntelliSense

If Linq.JS can solve your performance issue, you should sort it first and then render the sorted data source.

Another option is to use lodash, whose performance is claimed to be even better, see this link for details.

Here are the code snippets to sort some data: LINQ.JS:

var queryResult = $.Enumerable.From(jsonArray)
  .OrderBy(function(x) {
    return x.user.screen_name
  })
  .Select(function(x) {
    return x.user.screen_name + ':' + x.text
  })
  .ToArray();

Lodash:

var queryResults = _.chain(jsonArray)
.sortBy(function (x) { return x.user.screen_name })
.map(function(x) {
    return x.user.screen_name + ':' + x.text
  })
.value();

React Native - FlatList ordering without sorting data

1 Answers1

Linked