I've searched to find a solution to this very odd issue but cannot seem to find a resolution.
I provide a snack which when you run on android demonstrates the issue quite nicely: https://snack.expo.io/@whitefluffy/brokentextalign
Basically when a piece of text (not restricted to the steps import I'm using that's just the one I used in this).
As you can see the text wrapping at the top is wrapping which then aligns to the left of the screen even though it's within a container that is settings center, but that is fine but lower down the take a picture of... text wraps but now instead of aligning left it decides to center itself instead. So is it just that text wrapping always causes text to do what you're not trying to do or is there some way to get things to wrap in line with the styles set on the containers?
As I've tried additional containers, individually overriding the style on that object but nothing seems to work, so in my desperation, I turn to you the fine people of stack overflow to request someone put me out of my misery...
Many thanks, IDED
For the Top text, if you want to in align center just add style={{textAlign: 'center'}} to the <Text> (the one wrapping "To use this Global Vans Companion app we just need....")
For the third label of <Steps> in the labelStyle object line 48, add textAlign: 'left' and you are good to go!