There are two basic types of sorting methods mostly used in react native to sort ListView and FlatList array data into Ascending and Descending order, Using these methods developer can sort integer item array. In Ascending order the array items will be arranged as increment order, first the smallest item will be set and then its bigger and than again its bigger item. In Descending order the items will arranged in decrement order, first the bigger item will be set and then its 2nd smaller then its 3rd smaller. So in this tutorial we would going to Sort Array into Ascending Descending Order in react native and show the sorted array inside Text component.
Contents in this project React Native Sort Array into Ascending Descending Order:
1. Import Platform, StyleSheet, View and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text } from ‘react-native’;
|
2. Creating a array named as Array_1 with some random array items inside render’s block and sorting the array into Ascending order.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render()
{
var Array_1 = [10, 5, 25, 15, 7, 50, 20, 100];
// Sorting array in Ascending order.
Array_1.sort(function(a, b){return a–b});
return(
);
}
|
3. Create another array named as Array_2 in render’s block and sorting that array into Descending order.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render()
{
var Array_1 = [10, 5, 25, 15, 7, 50, 20, 100];
// Sorting array in Ascending order.
Array_1.sort(function(a, b){return a–b});
var Array_2 = [10, 5, 25, 15, 7, 50, 20, 100];
// Sorting array in Descending order.
Array_2.sort(function(a, b){return b–a});
return(
);
}
|
4. Create a Root view in render’s return block and show both sorted array into Text component.
|
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
|
render()
{
var Array_1 = [10, 5, 25, 15, 7, 50, 20, 100];
// Sorting array in Ascending order.
Array_1.sort(function(a, b){return a–b});
var Array_2 = [10, 5, 25, 15, 7, 50, 20, 100];
// Sorting array in Descending order.
Array_2.sort(function(a, b){return b–a});
return(
<View style = { styles.MainContainer }>
<Text style={styles.text}> {Array_1.toString()}</Text>
<Text style={styles.text}> {Array_2.toString()}</Text>
</View>
);
}
|
5. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
text:{
fontSize: 20,
textAlign: ‘center’,
margin:10
}
});
|
6. Complete source code for App.js File :
|
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
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text } from ‘react-native’;
export default class Myapp extends Component<{}>
{
render()
{
var Array_1 = [10, 5, 25, 15, 7, 50, 20, 100];
// Sorting array in Ascending order.
Array_1.sort(function(a, b){return a–b});
var Array_2 = [10, 5, 25, 15, 7, 50, 20, 100];
// Sorting array in Descending order.
Array_2.sort(function(a, b){return b–a});
return(
<View style = { styles.MainContainer }>
<Text style={styles.text}> {Array_1.toString()}</Text>
<Text style={styles.text}> {Array_2.toString()}</Text>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
text:{
fontSize: 20,
textAlign: ‘center’,
margin:10
}
});
|
Screenshot:
Also Read :
React Native Change Activity Actionbar Header Background Color in Android iOS Example Tutorial
Generate QR Code in React Native Android iOS App Example Tutorial
Disable Screen Rotation Landscape Mode in Android iOS React Native
React Navigation 5.x Configure Header Bar Title Text Style Background Color in React Native
The Emulator Process for AVD was Killed Windows 7,8.1,10 Error Solution
