Why does the text not center vertically with textAlign nor with justfiyContents and alignItems with React Native?

I have only been programming with React Native (managed workflow with Expo) for about 2 years. But flex and Text centering still gets me.

I have created a snack that demonstrates my confusion:

[https://snack.expo.dev/@rjapenga/stackoverflow-center-confusion]

I have tried answers provided here and through AI (use justifyContent and alignItems AND use textAlign and still cannot get it to center vertically or why the Timeout centers.Here are the StyleSheets

const styles = StyleSheet.create({  container1: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    color: 'red',    fontSize: 30,  },  container: {    flex:1,  },  text: {    textAlign: 'center',    color: 'white',    fontSize: 30,  },});

Ignoring the Timeout , the Waiting for Data portion does not center the text top to bottom. So my question is:

How do I center the "Waiting for Data" text Vertically?

Finally, I don't understand why the final Timeout is centered while the others are not.

Code without the StyleSheet:

import React, { useState } from 'react';import { ActivityIndicator, StyleSheet, View, Text } from 'react-native';import { LinearGradient } from 'expo-linear-gradient';const App = () => {  const [isLoading, setIsLoading] = useState(true);  const gradientSE = ['#4c669f', '#3b5998', '#192f6a'];  function setIsLoadingFalse() {    setIsLoading(false);  }  setTimeout(setIsLoadingFalse, 5000);  return (<View style={styles.container}><LinearGradient style={styles.container} colors={gradientSE}>        {isLoading === true ? ( //<View style={styles.container}><Text style={styles.text}>Waiting for Data</Text><ActivityIndicator              style={styles.text}              size="large"              color="white"            /></View>        ) : (<View style={styles.container1}><Text style={styles.text}>Timeout</Text></View>        )}</LinearGradient></View>  );};const styles = StyleSheet.create({  container1: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    color: 'red',    fontSize: 30,  },  container: {    flex:1,  },  text: {    textAlign: 'center',    color: 'white',    fontSize: 30,  },});export default App;