Your description of align-items and justify-content seem to be backwards from what MDN describes. You have justifyContent: “center” as a vertical alignment whereas MDN lists this as an alignment for the horizontal axis. Same goes for align-items. Align-items should be aligning flexbox items along the vertical axis. Is this something I do not understand for native apps?
the default flex direction in react-native is column rather than row
here’s another good guide to learn more: https://www.reactnative.express/core_components/layout