The Style attribute alignItems : ‘ ‘ is used on a View or component to set their children alignment. There are 4 different options available in this attribute flex-start, center, flex-end, and stretch. So in this tutorial we would going to set View Align Horizontally Center dynamically on button click using alignItems :’center’ in react native android iOS app example. We would set this value on application run time, So when app user click on the button then it will update the State value and according to that value we would set the align center. So let’s get started .
Content in this project set View Align Horizontally Center dynamically on button click in react native android iOS app example:
1. Import StyleSheet, View and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import {StyleSheet, View, Button } from ‘react-native’;
|
2. Create a State named as Align in constructor() and set its default value as False.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state={
Align : false
}
}
|
3. Create a function named as Set_Align_Horizontal_Center_Method(). This function would update the Align State value to True.
|
1
2
3
4
5
6
7
8
|
Set_Align_Horizontal_Center_Method =()=>{
this.setState({
Align : true
})
}
|
4. Create a Root View in renders’s return block. We would call call the Custom CSS style class in this View . Now using the Style Array Method we would call another Style attribute alignItems. We would use the Ternary operator with state value. So when the State value is false it will by default set the alignItems: ‘flex-start’ and on button click when the state value is updated as True then it will set the alignItems: ‘center’ . After updating the State value all of its children view will be aligned in Horizontally center.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={[styles.MainContainer, { alignItems: this.state.Align ? ‘center’ : ‘flex-start’ }]} >
</View>
);
}
|
5. Create a Child View and Button in Root View. We would call the Set_Align_Horizontal_Center_Method() function on button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={[styles.MainContainer, { alignItems: this.state.Align ? ‘center’ : ‘flex-start’ }]} >
<View style={styles.SampleView} />
<Button title=“Click Here to Set View Align Center in Horizontal Programmatically” onPress={this.Set_Align_Horizontal_Center_Method} />
</View>
);
}
|
6. Create Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const styles = StyleSheet.create(
{
MainContainer: {
flex: 1,
marginTop: 20
},
SampleView :{
width: 100,
height: 100,
backgroundColor : ‘#00BCD4’,
marginBottom:50
}
});
|
7. 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
|
import React, { Component } from ‘react’;
import {StyleSheet, View, Button } from ‘react-native’;
export default class MyProject extends Component {
constructor(){
super();
this.state={
Align : false
}
}
Set_Align_Horizontal_Center_Method=()=>{
this.setState({
Align : true
})
}
render() {
return (
<View style={[styles.MainContainer, { alignItems: this.state.Align ? ‘center’ : ‘flex-start’ }]} >
<View style={styles.SampleView} />
<Button title=“Click Here to Set View Align Center in Horizontal Programmatically” onPress={this.Set_Align_Horizontal_Center_Method} />
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer: {
flex: 1,
marginTop: 20
},
SampleView :{
width: 100,
height: 100,
backgroundColor : ‘#00BCD4’,
marginBottom:50
}
});
|
Screenshot in Android :
Screenshot in iOS device :
Also Read :
Set View Height Width in Percentage Flex Dimensions in React Native
React Native Solve Warning componentwillmount is Deprecated and will be Removed in the Next Major Version
Use React Native Ionicons Icon in Android iOS App Example
React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial
Run Test React Native apps in Real Android device using WiFi Network Windows
