Center text vertically in react-native

Question

As given in the image, the text 10 shares is on the top left corner. I want to center 10 shares vertically. I have tried some methods to make it come to the center of the yellow view.

render() {
        return (
            <View
                style={styles.grandParentView}>
                <View
                    style={styles.parentView}>
                    <View
                        style={styles.childView}>
                        <Text
                            style={styles.topLeftView}
                            key={'cardTitle'}>
                            {`APPL`}
                        </Text>
                        <Text
                            style={styles.topRightView}
                            key={'cardTitle2'}>
                            {`$1000.00`}
                        </Text>
                    </View>
                    <View
                        style={styles.childView}>
                        <Text
                            style={styles.bottomLeftView}
                            key={'cardTitle3'}>
                            {`10 shares`}
                        </Text>
                        <View
                            style={styles.redView}
                            key={'cardTitle4'}>
                            <Text
                                style={styles.buttonLeftView}
                                key={'cardTitle4'}>
                                {`+$200.00`}
                            </Text>
                            <Text
                                style={styles.buttonRightView}
                                key={'cardTitle4'}>
                                {`+0.02%`}
                            </Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    }


const styles = StyleSheet.create({
  grandParentView: {
        flex: 1,
        marginTop: 60,
        alignSelf: 'baseline',
        flexDirection: 'row'
    },
    newView:{
        flex:1,
        alignContent: 'center'
    },
    parentView: {
        flex: 1,
        marginVertical: 5,
        marginHorizontal: 5,
        alignSelf: 'baseline',
        backgroundColor: 'blue',
        flexDirection: 'column',
    },
    childView: {
        marginVertical: 5,
        marginHorizontal: 5,
        paddingHorizontal: 5,
        backgroundColor: 'green',
        flexDirection: 'row',
        alignContent: 'center',
        justifyContent: 'center'
    },
    topLeftView: {
        flex: 1,
        color: 'black',
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'yellow',
        alignSelf: 'stretch',
        textAlign: 'left',
        paddingLeft: 5
    },
    bottomLeftView: {
        flex: 1,
        color: 'black',
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'yellow',
        height: 50,
        alignSelf: 'stretch',
        textAlign: 'left',
        paddingLeft: 5
    },
    topRightView: {
        flex: 1,
        color: 'black',
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'red',
        alignSelf: 'stretch',
        textAlign: 'right',
        paddingRight: 5
    },
    redView: {
        flex: 1,
        flexDirection: 'row',
        color: 'black',
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'red',
        alignSelf: 'stretch',
        textAlign: 'right',
        paddingRight: 5
    },
    buttonLeftView:{
        flex: 6,
        color: 'black',
        marginVertical: 5,
        height: 50,
        marginHorizontal: 5,
        backgroundColor: 'cyan',
        alignSelf: 'stretch',
        textAlign: 'right',
        paddingRight: 5
    },
    buttonRightView:{
        flex: 4,
        color: 'black',
        height: 50,
        marginVertical: 5,
        marginHorizontal: 5,
        backgroundColor: 'cyan',
        alignSelf: 'stretch',
        textAlign: 'right',
        paddingRight: 5
    }
});

I want to center the bottomLeft item (10 shares) vertically. Now it is showing top left in the view. I am new to react-native so I don't have much experience using flex and alignment. Thanks for the help in advance.

Answer 1

add textAlignVertical property and set it to center and change textAlign to center in your bottomLeftView style.

  bottomLeftView: {
    flex: 1,
    color: "black",
    marginVertical: 5,
    marginHorizontal: 5,
    backgroundColor: "yellow",
    height: 50,
    alignSelf: "stretch",
    textAlign: "center",
    paddingLeft: 5,
    textAlignVertical: "center"
  }

Answer 2

Just add textAlignVerticle property in bottomLeftView style and set it to center

bottomLeftView: {
    flex: 1,
    color: "black",
    marginVertical: 5,
    marginHorizontal: 5,
    backgroundColor: "yellow",
    height: 50,
    alignSelf: "stretch",
    textAlign: "left",
    paddingLeft: 5,
   textAlignVertical: "center"
  }