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.

TAGS: react,react native,javascript,centering

03/24/2017

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.

In web, a common practice for me was to use absolute positioning on the text, with a
left: 50%, top: 50%, transform: translate(-50%,-50%)
style to get it to center over the image.

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.