Centered Text Over Image in React Native
Create text centered over an image in React Native with flexbox, without the need for image dimensions, absolute positioning, or translating.
Vertical and horizontal centering is one of those things that always comes up in design, and luckily in the past couple of years we’ve started to get better solves for it.
left: 50%, top: 50%, transform: translate(-50%,-50%)Unless you’re using one of the recent versions of react native, however, you don’t have access to percentages, and chances are you’re using flexbox as a default for layout. Here’s a simple alternative:
In React Native, an image component can encapsulate a text component, so there’s no need to establish a z index. If you don’t want to have to worry about the dimensions of your image, you can specify flexGrow, so that it fills its container, and null out the height and width, so that the encapsulated text component can align properly to the center.