I understand the issue that you are facing. Actually your issue didn't content the styles part but, it's fine. I will help you out.

Reason for this was, if text length or text size was increased so while rendering negative text will take next row or go outside the Text component. The solution is use adjustFontSizeTofit & numbersOfline(1) Text component properties for implicitly handling.

Or use can debug using flex:1 , flexShrink :1, textAllign:'center' for Text style