Expo crash once put <Text> inside <View> without error - react-native

Question

This is the most weird thing in Expo i never face before. I try to design new UI. but this is the first time i face this kind of issue. If i put any hi at the position i mark "HERE", once i open that screen the app will crash without error. then i remove the hi, open back Expo, its ok
Feel free to test my code. I wonder why is this happen. If i put other than such as it works.
Ive tried few times, it is confirm the error cause by only.
Ive tested on several IOS simulator, already restart the simulator even on my iphone SE 2020, it will result the same. Crashed without error
Please help me
<View
style={{
flex: 1,
}}
>
<View
style={{
flexDirection: "row",
backgroundColor: "#3341B0",
height: screenHeight / 7,
justifyContent: "space-evenly",
}}
>
<View
style={{
flexDirection: "row",
backgroundColor: "transparent",
alignItems: "flex-end",
marginBottom: 20,
width: screenWidth / 2,
}}
>
<View
style={{
width: 20,
alignItems: "flex-start",
justifyContent: "flex-start",
}}
></View>
<View
style={{
width: screenWidth,
alignItems: "stretch",
flexDirection: "column",
}}
>
<Text
style={{
fontSize: 20,
fontWeight: "700",
fontStyle: "normal",
color: "white",
}}
>
{username !== "" && <Text>{`Hello ${username}`}</Text>}
</Text>
<Text
style={{
fontSize: 10,
fontWeight: "700",
fontStyle: "normal",
color: "white",
}}
>
Company : Testing
</Text>
</View>
</View>
<View
style={{
flexDirection: "row",
backgroundColor: "transparent",
alignItems: "flex-end",
marginBottom: 20,
width: screenWidth / 2,
}}
>
<Text
style={{
fontSize: 10,
fontWeight: "700",
fontStyle: "normal",
color: "white",
}}
>
Department : Sales and Marketing
</Text>
</View>
</View>
<View
style={{
flexDirection: "row",
backgroundColor: "#3341B0",
alignItems: "flex-start",
width: screenWidth,
height: 250,
}}
>
<View
style={{
flexDirection: "column",
backgroundColor: "white",
alignItems: "flex-start",
width: screenWidth,
height: 250,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
}}
>
<View
style={{
flexDirection: "row",
backgroundColor: "transparent",
alignItems: "baseline",
marginBottom: 10,
marginTop: 10,
marginLeft: 20,
}}
>
<Text
style={{
fontSize: 15,
fontWeight: "700",
fontStyle: "normal",
color: "black",
}}
>
Work Orders
</Text>
</View>
<View
style={{
flexDirection: "row",
backgroundColor: "transparent",
alignItems: "baseline",
marginBottom: 10,
marginLeft: 10,
marginRight: 10,
marginTop: 10,
}}
>
<View
style={{
width: screenWidth / 3 - 20,
height: 80,
backgroundColor: "#041FFB",
marginLeft: 10,
borderRadius: 5,
alignItems: "center",
justifyContent: "center",
}}
>HERE</View>
<View
style={{
width: screenWidth / 3 - 20,
height: 80,
backgroundColor: "#FBD15F",
marginLeft: 10,
borderRadius: 5,
}}
>HERE</View>
<View
style={{
width: screenWidth / 3 - 20,
height: 80,
backgroundColor: "pink",
marginLeft: 10,
borderRadius: 5,
}}
>
HERE
</View>
</View>
</View>
</View>
</View>