Kyle Shevlin

For going on three years now, I’ve been working daily in an environment where all the code that I write has to support both React and React Native. People unfamiliar with what it takes to support both platforms might not realize a few restrictions you must deal with. One of them is this: Flexbox is your only layout option.

That’s right. No tables. No grids. No anything else. Flexbox is all you got.

Because of this, there’s a common mistake I’ve seen developers make over and over I want to demonstrate and fix.

In React Native, every element at a fundamental level is a View or a Text. Thus, when creating components that work across platforms, we have to use these View and Text components on web, too. Generally, this is accomplished through a library like react-native-web, which renders the correct underlying component depending on the platform.

It’s important to know that there is one key difference between a View and a div: a View is not a block level element.View is a flex container with flex-direction set to column.

With that in mind, now I’m going to show you two very similar examples, and I want you to spot the difference.

Did you spot it? What about now?

You see the difference? Both examples are Flex columns. The first example has set align-items to center, while the second example has kept the default align-items of stretch, but used text-align: center on the text instead. This is a small detail that’s easy to overlook, but can have you scratching your head later trying to get things to align the way you’d like.

When the text is short, it can seem like which CSS you use doesn’t matter, but if we were to add a background to the text in our first two examples, we’d notice the difference right away.

When we change align-items to center, we shrink all the children to their minimum content width. For text that is shorter than the width of its container, it will appear the same as text-align: center, but will behave differently once our text starts to wrap.

My main reason for pointing this out is that I so often see unnecessary compensations on the children of a Flex container. Yes, sometimes it might be easier to set a particular align-items on the parent, and then use align-self on a child to make an adjustment. That’s why the CSS property exists, but often these compensations are unnecessary entirely.

For example, if we use align-items: center instead of setting the text-align on the title, and we later have an element that we need to take up the full width, we might compensate by setting it’s width to 100%.

We could avoid that simply by setting text-align: center on the title instead.

If you peek under the hood at the Tailwind for that example, you’ll see we’ve added two classes when one would have done the job. Do this enough times across an app, and the number of unnecessary styles can really grow.

This is a simple thing to get confused about and only notice later when you’re making a lot of compensations on the children to get things aligned correctly. Hopefully by seeing this simple example, the gears will start turning and you’ll spot when you might need to use one or the other, or even sometimes both.