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
|
1 |
react-native init projectName |
In my case, I have already created a project
2. Import the following components
|
1 2 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
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 🙂