Why Text element doesn't center vertically inside View? - reactjs

Question

Using react-native, I created a custom button as follows:
import React, {Component, Fragment} from 'react';
import globalStyles from './../../globals/styles'
import {
Text,
View,
TouchableOpacity,
StyleSheet
} from 'react-native';
export default class MyButton extends Component {
render() {
return (
<TouchableOpacity style={styles.opacitySurface} onPress={this.props.customAction}>
<View style={styles.textContainer}>
<Text style={styles.text}>{this.props.buttonText}</Text>
</View>
</TouchableOpacity>
)
}
}
let buttonFontSize = 10;
const styles = StyleSheet.create({
textContainer: {
justifyContent: 'center',
alignItems: 'center',
},
opacitySurface: {
backgroundColor: globalStyles.colors.customerGreen,
width: "25%",
height: 60,
padding: 10,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.8,
shadowRadius: 1.5
},
text: {
textAlign: 'center',
fontFamily: globalStyles.fonts.OpenSans,
color: 'white',
fontSize: buttonFontSize,
}
}
);
But the text inside this button doesn't align vertically. Premise: I am new in react-native and I am almost sure I missing something of really stupid.

Answer 1

For the properties justifyContent and alignItems to work they need to be on an element with display: flex.
Whats making your text align to center is the property textAlign: 'center'
on style.text
Use display: 'flex' and flex: 1 on your style.textContainer
textContainer: {
display: 'flex'
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}

Answer 2

add css to your opacitySurface
display: "flex",
justifyContent: "center",
alignItems: "center"
it will make your text in center

Answer 3

Add flex: 1 in your textContainer style :
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}