The array’s inbuilt function ArrayName.push(“Put Your Value Here”) is used to programmatically add values in string array. So in this tutorial we would going to create a react native app with TextInput and Button component. Now we would get the TextInput value on button click and store-insert the value in String array using .push() function in android iOS react native application.
Contents in this project Dynamically Add Values in String Array List in React Native on Button Click:
1. Import StyleSheet, View, Text, Button, Alert and TextInput component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Button, Alert, TextInput } from ‘react-native’;
|
2. Create a String array named as SampleArray[] just above your class to make this array available globally in all below classes. We would also insert 2 values in array.
|
1
|
var SampleArray = [“ONE”, “TWO”] ;
|
3. Create constructor() in your project’s class. Now we would create a State named as Holder. This state is used to store the TextInput value and then using this state we would insert value in Array.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor(props) {
super(props)
this.state = {
Holder: ”
}
}
|
4. Create a function named as AddItemsToArray() . Inside this function we would Add items to array using State. We would also convert the State value to string. After successfully insertion we would convert the whole array into String and show inside the Alert to make sure that value has been successfully added.
|
1
2
3
4
5
6
7
8
9
|
AddItemsToArray=()=>{
//Adding Items To Array.
SampleArray.push( this.state.Holder.toString() );
// Showing the complete Array on Screen Using Alert.
Alert.alert(SampleArray.toString());
}
|
5. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
6. Create a TextInput and Button component in Root View. Now we would apply the onChangeText={} prop on TextInput to store the TextInput typed value inside Holder State. We would also call the AddItemsToArray() function on Button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Value here”
onChangeText={TextInputValue => this.setState({ Holder : TextInputValue }) }
style={{textAlign: ‘center’, marginBottom: 6, height: 45}}
/>
<Button title=“Click Here To Add Value To Array” onPress={this.AddItemsToArray} />
</View>
);
}
|
7. Create Style for View.
|
1
2
3
4
5
6
7
8
9
10
11
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
margin: 15
}
});
|
8. 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Button, Alert, TextInput } from ‘react-native’;
var SampleArray = [“ONE”, “TWO”] ;
export default class MainActivity extends Component {
constructor(props) {
super(props)
this.state = {
Holder: ”
}
}
AddItemsToArray=()=>{
//Adding Items To Array.
SampleArray.push( this.state.Holder.toString() );
// Showing the complete Array on Screen Using Alert.
Alert.alert(SampleArray.toString());
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Value here”
onChangeText={TextInputValue => this.setState({ Holder : TextInputValue }) }
style={{textAlign: ‘center’, marginBottom: 6, height: 45}}
/>
<Button title=“Click Here To Add Value To Array” onPress={this.AddItemsToArray} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
margin: 15
}
});
|
Screenshots in Android device :
Screenshots in iOS device :
Also Read :
Create Transparent Background View in React Native Android iOS
Run React Native Project on Specific iOS Simulator Device in MAC
Create Horizontal ScrollView in React Native Tutorial Android iOS
Create Rounded Circular Progress Chart in React Native
React Native Get Device Current Location Latitude Longitude Example
