Sort ArrayList by id react-native

Hi Guys, In this article, we going to learn about How to sort ArrayList by id in react-native, while developing react-native application developer’s need to save API response in state and use these data for display, this data mainly list and developers add his logic, algorithms on this list, sometimes we have to split our array list and after when needed we also merge both lists and make one list hence sometimes id order getting disturbed. so after doing lots of work on ArrayList we have to sort that list by id so that our data is being displayed properly. so let’s start

1. Create a new project

react-native init projectName

In my case, I have already created a project

2. Import the following components

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,FlatList, Button} from 'react-native';

3. Create ArrayList

I have created ArrayList with random id’s and define it in the constructor as follows, you can use list directly from API response

 constructor() {
    super();
    this.state = {
      demoList:[
        {
          id: 3,
          name: "Omkar"
        },
        {
          id: 2,
          name: "Abhishek"
        },
        {
          id: 1,
          name: "Saurabh"
        },
        {
          id: 1,
          name: "Saurabh"
        },
        {
          id: 4,
          name: "Chintan"
        },   
        {
          id: 6,
          name: "Hardik"
        },
        {
          id: 5,
          name: "Lalit"
        },
      ]
    }
  }

Now we have to sort the above list on the button Press

4. Function to sort ArrayList

 sortListById(){
     //Sort ArrayList by ascendingorder
     this.state.demoList.sort(function(obj1, obj2) {
      // Ascending: first id less than the previous
      return obj1.id - obj2.id;
    });

    this.setState(previousState => (
      { demoList: previousState.demoList }
    ))
   
  }

As you saw in the above code the function returning sorted Arraylist by asc order after that we have to update previousState ArrayList using this.setState({previousState =>{demoList: previousState.demoList}});

Let’s see full source code so that you will get more clarity

5. Full source code(Home.js)

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,FlatList, Button} from 'react-native';


//Define a color for toolbar
global.backgroundColor = '#176abf';


export default class Home extends Component {

  constructor() {
    super();
    this.state = {
      demoList:[
        {
          id: 3,
          name: "Omkar"
        },
        {
          id: 2,
          name: "Abhishek"
        },
        {
          id: 1,
          name: "Saurabh"
        },
        {
          id: 1,
          name: "Saurabh"
        },
        {
          id: 4,
          name: "Chintan"
        },   
        {
          id: 6,
          name: "Hardik"
        },
        {
          id: 5,
          name: "Lalit"
        },
      ]
    }
  }

  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
       return {
         title:  'DetailsView',
         headerStyle: {
             backgroundColor: '#0570E9',
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         }, 
       }
    };


  componentDidMount() {
   // do API call here
  }

  // Function to sort ArrayList by asc order
  sortListById(){
     //Sort ArrayList by ascending order
     this.state.demoList.sort(function(obj1, obj2) {
      // Ascending: first id less than the previous
      return obj1.id - obj2.id;
    });

    this.setState(previousState => (
      { demoList: previousState.demoList }
    ))
  }

  render() {
    return (
      <View style={styles.container}>
        <View  style={{margin:10, alignItems:'center', justifyContent:'center'}}>
        <FlatList
         data={ this.state.demoList }
         extraData={this.state}
         ItemSeparatorComponent = {this.ItemSeparatorLine}
         renderItem={({item}) => 
       <View>
        <View style={{flexDirection:'row'}}>
        <Text style={{fontSize:20, margin: 15}}>{item.id}</Text>
        <Text style={{fontSize:20, margin: 15}}>{item.name}</Text>
        </View>
   </View>
  }
   keyExtractor={(item, index) => index}
   />
        <View style={{flex:1}}>
          <Button
            title="Sort List"
            onPress={() => this.sortListById()}
          />
          </View>
   </View>
 
  </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 10,  
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    fontSize: 18,
  },
});

6. Output

Hope you will like this post, thank you 🙂