The Array object can be convertible into a single Var object using .toString() method and removes the double quotes( ” “) from array elements. So in this tutorial we would going to Convert Complete Array Object To Single String Variable.
Contents in this project Convert Complete Array Object To Single String Variable in React Native :
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 array named as SampleArray_1 in render’s block. Now we would convert this complete array object into String using .toString() method and store to another Var.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
var SampleArray_1 = [ “One”, “Two”, “Three”, “Four”, “Five”, “Six” ];
// Converting Array Object to String.
var SampleArray_2 = SampleArray_1.toString();
return (
);
}
|
3. Printing the Converted array into Text component in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
var SampleArray_1 = [ “One”, “Two”, “Three”, “Four”, “Five”, “Six” ];
// Converting Array Object to String.
var SampleArray_2 = SampleArray_1.toString();
return (
<View style={styles.MainContainer}>
<Text style={styles.TextStyle} > { SampleArray_2 } </Text>
</View>
);
}
|
4. Create Style for View and Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10
},
TextStyle:{
fontSize : 22,
textAlign: ‘center’
}
});
|
5. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
export default class App extends Component<{}> {
render() {
var SampleArray_1 = [ “One”, “Two”, “Three”, “Four”, “Five”, “Six” ];
// Converting Array Object to String.
var SampleArray_2 = SampleArray_1.toString();
return (
<View style={styles.MainContainer}>
<Text style={styles.TextStyle} > { SampleArray_2 } </Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10
},
TextStyle:{
fontSize : 22,
textAlign: ‘center’
}
});
|
Screenshot :
Also Read :
Example of Creating Bezier Chart in React Native iOS Android
React Native Combine Two Strings Into One Using concat() Function
Add Rounded Corners Border to Text Component in React Native iOS Android
Create Global Scope Variables in React Native used between Activities
React Navigation 5.x Change Header Title on Button Click in React Native Dynamically
