center text in a view on top of the screen (react-native) - react-native

Question

I am trying to create a view with height of 200 and with some background color. on top of the view i want to place two texts in the center of the screen right below the toolbar. my code is not centering the texts. texts are appearing on the left side but i want them to be centered.
I am using Base.js style script as a way to standardize my application to reuse styles
see attached image
see code below
//Base.js
import {StyleSheet, Dimensions} from 'react-native'
export const dimensions = {
fullHeight: Dimensions.get('window').height,
fullWidth: Dimensions.get('window').width
}
export const colors = {
primary: '#039BE5',
secondary: '#027CB7',
tertiary: '#FF4081'
}
export const padding = {
sm: 10,
md: 20,
lg: 30,
xl: 40
}
export const margin = {
margin_1dp: 1,
margin_4dp: 4,
}
export const fonts = {
font_18sp: 18,
font_44sp: 44,
lg: 28,
//primary: 'Cochin'
}
export const pos = {
position: 'absolute',
top: 0,
alignItems: 'center',
justifyContent:'center',
}
// added below our colors, fonts, padding etc
// base styles
const baseStyles = {
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
},
header: {
backgroundColor: 'transparent',
position: pos.position,
top: 0,
fontSize: fonts.font_44sp,
fontFamily: fonts.primary,
fontWeight: 'bold',
color: 'black',
textAlign: 'center',
},
sub_header: {
backgroundColor: 'transparent',
position: pos.position,
top: 55,
fontSize: fonts.font_18sp,
fontFamily: fonts.primary,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
},
image: {
height: 200, justifyContent:'center', backgroundColor: '#00BCD4'
},
section: {
paddingVertical: padding.lg,
paddingHorizontal: padding.xl
},
}
export default function createStyles(overrides = {}) {
return StyleSheet.create({...baseStyles, ...overrides})
}
//This is an example code for NavigationDrawer//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text } from 'react-native';
// import all basic components
import createStyles from '../styles/Base.js'
const styles = createStyles()
//import styles from './Style.js'
export default class Screen1 extends Component {
//Screen1 Component
render() {
return (
<View style={styles.container}>
<View style={{ height: 200, justifyContent:'center', backgroundColor: '#00BCD4' }} />
<Text style={styles.header}> $0.00 </Text>
<Text style={styles.sub_header}> Current Balance </Text>
</View>
);
}
texts should be center in the middle of the screen and below the toolbar.
can anyone help fix my code so that the texts are center? thanks in advance

Answer 1

The default flexDirection in react-native is column ... so you don need to specify it ... and alignItems will center children horizontally with column-flex-direction
<View
style={{ alignItems: 'center', backgroundColor: '#00BCD4', height: 200 }}
>
<Text style={styles.header}> $0.00 </Text>
<Text style={styles.sub_header}> Current Balance </Text>
</View>

Answer 2

So this might not solve everything but a common mistake people make when it comes to flexbox is they don't realize when they specify a flex-direction, the styles you use to center get reversed.
Typically if flex-direction was set to default which is row, you would use align-items to vertically center.
However, because you have it set to column, you need to use justify-content instead.
This is a pretty good article on flex. https://css-tricks.com/snippets/css/a-guide-to-flexbox/