O'Reilly logo

Hands-On Design Patterns with React Native by Mateusz Grzesiukiewicz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling flex items

As we build the application, you may quickly realize the styles are a little bit ugly. The color palette is a complete disaster. Unless you are a designer, I recommend Googling a color-palette generator. I have changed the colors to be more palatable: white, black, and blue.

Additionally I have added margins and paddings. Everything is nicely separated by a border between the header and content. Let's check out how it looks on the iPhone 8 and iPhone X:

Full application look on iPhone 8 and iPhone X simulators after colour changes

Some of you may not know the basics of styling, so let's quickly explain what margins and ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required