Center text vertically in react-native

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

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"
  }