The JavaScript’s sort() function is used to sort the String array into alphabetically order. Sorting is a very important procedure for dynamic and static android iOS applications because using the sorting technique we can arrange the dis-arranged array data into systematic order. So in this tutorial we would going to Sort String Array into Alphabetical Order in Android iOS react native application example tutorial.
Contents in this project Sort String Array into Alphabetical Order in React Native Android iOS App:
1. Import StyleSheet, Text and View component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
|
2. Create a local String array with random order data in render’s block named as Array_1.
|
1
2
3
4
5
6
7
8
9
|
render() {
var Array_1 = [ “A”, “C”, “E”, “G”, “I”, “B”, “D”, “F”, “H”, “J” ];
return (
);
}
|
3. Now we would convert this array into Alphabetical Order using .sort() function and store the sorted array into another Array_2 variable. We would convert the array into single string.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
var Array_1 = [ “A”, “C”, “E”, “G”, “I”, “B”, “D”, “F”, “H”, “J” ];
Array_1.sort();
var Array_2 = Array_1.toString();
return (
);
}
|
4. Create a Root View in render’s return block. Now we would make a Text component in this view and show the converted array inside the Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
var Array_1 = [ “A”, “C”, “E”, “G”, “I”, “B”, “D”, “F”, “H”, “J” ];
Array_1.sort();
var Array_2 = Array_1.toString();
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize : 20, textAlign: ‘center’ }} > { Array_2 } </Text>
</View>
);
}
|
5. Create Style.
|
1
2
3
4
5
6
7
8
9
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
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
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
export default class App extends Component<{}> {
render() {
var Array_1 = [ “A”, “C”, “E”, “G”, “I”, “B”, “D”, “F”, “H”, “J” ];
Array_1.sort();
var Array_2 = Array_1.toString();
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize : 20, textAlign: ‘center’ }} > { Array_2 } </Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10
}
});
|
Screenshot:
Also Read :
How to Send ListView Item Click Value to Another Activity in React Native
React Native Simple Custom GridView Layout Android iOS Tutorial
React Native Transform Scale Animation Android iOS Example
System UI isn’t responding Android Emulator React Native Error Solution
React Native Create ViewPager with Tab Title Dot Indicators iOS Android
