How to order by 'something' in React Native FlatList?

Question

Here is my entire code at Home.js file

export default function Home({navigation}) {

const [reviews, setReviews] = useState([
    { title: 'Alfa Romeo 147 1.9JTD', rating: 2020, body: 340000, sg: ['ABS ',  'CD ', 'ESP '], key: '1' },
    { title: 'Gotta Catch Them All (again)', body: 'lorem ipsum', key: '2' },
    { title: 'Not So "Final" Fantasy', body:'lorem ipsum', key: '3' },
    { title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '5' },
    { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '6' },
    { title: 'Alfaromeo', rating: 3200, body: 'sadaa', key: '7' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '8' },
    
  ]);

 return (
<View style={styles.container}>
<FlatList data={reviews} renderItem={({ item }) => (
    <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>
        
        <View style={styles.content}>
            <Image
            style={styles.image}
            source={{
            uri: 'https://www.autoplac-cg.me/storage/1871/conversions/5f9eb91821de1_20FB3486-4A0A-4B4A-B13C-CAE912950E22-thumb.jpg',
            }}
            />
            <Text style={styles.headertext}>{item.title }</Text>
            <Text style={styles.infotext}>{item.rating}god. | {item.body}km <Text style={styles.collapse}>+</Text></Text>
        </View>
    </TouchableOpacity>
  )} />
</View>

); }

So I want to put first on FlatList that review who has in array 'first', so in code its fourth. How I can do that?

I want to this be first on FlatList

{ title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' }

Answer 1

I believe that the best way to do that is to sort the data as needed and then render it with FlatList.

The sort logic may be the way you need, which means that you are free to "order by 'anything'" if you wish.

According to the data set and information you provided, the business rule, as I understood, is to show the items with fisrt flag at first place. So, the sorting could be like this:

 export default function Home({navigation}) { const [reviews, setReviews] = useState([ { title: 'Alfa Romeo 147 1.9JTD', rating: 2020, body: 340000, sg: ['ABS ', 'CD ', 'ESP '], key: '1' }, { title: 'Gotta Catch Them All (again)', body: 'lorem ipsum', key: '2' }, { title: 'Not So "Final" Fantasy', body:'lorem ipsum', key: '3' }, { title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' }, { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '5' }, { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '6' }, { title: 'Alfaromeo', rating: 3200, body: 'sadaa', key: '7' }, { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '8' }, ]); function renderItem(item) { return ( <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}> <View style={styles.content}> <Image style={styles.image} source={{ uri: 'https://www.autoplac-cg.me/storage/1871/conversions/5f9eb91821de1_20FB3486-4A0A-4B4A-B13C-CAE912950E22-thumb.jpg', }} /> <Text style={styles.headertext}>{item.title}</Text> <Text style={styles.infotext}>{item.rating}god. | {item.body}km <Text style={styles.collapse}>+</Text></Text> </View> </TouchableOpacity> ); } function sortData() { let sortedArray = []; // If the item contains "first" property, it will be placed at the beginning of the sortedArray, else it will be at the end of it reviews.forEach(review => ( review.first ? sortedArray = [review, ...sortedArray] : sortedArray.push(review) )); return sortedArray; } return ( <View style={styles.container}> <FlatList data={sortData()} renderItem={({ item }) => renderItem(item)} /> </View> ); }

I moved the code to render an item to a separated function just for convenience

Answer 2

Use array.sort with providing compare function

See: https://www.w3schools.com/js/js_array_sort.asp

You can use

reviews.sort((a, b) => a.rating - b.rating)

This will sort your reviews array.

Answer 3

You can do is

var reviews1 = reviews.filter(function (el) {
  return el["first"];
});

var reviews2 = reviews.filter(function (el) {
  return el["first"] === undefined;
});

const reviewsFinalArray = reviews1.concat(reviews2); // Your result