React Native Stylesheet not working until refresh

Question

My compontent has a <Text> within a <BlurView>.

import React from "react";
import { Text, View, StyleSheet} from "react-native";
import { BlurView } from "@react-native-community/blur";

const styles = StyleSheet.create({
    blurView: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        display: "flex",
        justifyContent: "center",
    },
    text: {
        fontSize: 22, 
        color: "#FFFFFF", 
        textAlign: "center"
    }
})

function BlurryWait({show}){
    if(show)
        return (
            <BlurView
                blurType="dark"
                blurAmount={15}
                style={styles.blurView}
            >   
                <Text style={styles.text}>Please wait...</Text> 

            </BlurView>       
        )
    else
        return <View/>
}

export default BlurryWait

And I use it like this in my main component (hardcoded show property for demonstration purposes):

<BlurryWait show={true}/>

It's expected to center the text right in the middle of the screen. However when I toggle that variable it messes up the styles, the text is not centered anymore.

In order to get it working again, I have to chage something in the styles and it will work again. Such as just changing the text size will make it right. I don't know what's happening here. I already cleaned the android build. How can I make this stick to the styles?