When using the code below
<View style={{flexDirection: "row", justifyContent: "space-between"}}>
<View>
<Text style={{fontSize: 50}}>{hours}</Text>
<Text style={{alignSelf: "flex-end"}}>h</Text>
<Text style={{fontSize: 50}}>{minutes}</Text>
<Text style={{alignSelf: "flex-end"}}>m</Text>
<Text style={{fontSize: 50}}>{seconds}</Text>
<Text style={{alignSelf: "flex-end"}}>s</Text>
</View>
<View style={{alignSelf: "center"}}>
<Icon name="cancel" />
</View>
</View>
The rendered output appears like this
https://i.sstatic.net/assBK.png
I anticipated that the first inner view would be displayed as a single block on the left-hand side of the screen, while the second inner view would appear on the right. However, instead of maintaining all text elements on the same line and creating space between them and the x
icon, it seems like the inner view is being treated as a column. I wonder if there could be a fine distinction from web flexbox that I am overlooking. What steps can I take to ensure that all text remains on a single line while spacing out the x
icon?