CODEWITHSUNDEEP
react-native
Konrad
Konrad

Reputation: 7247

How to style for both orientations

How should I style to make my app look display nice on both orientations? Landscape and portrait mode? Like now I use just margins because it's easier to move my design from photoshop using zeplin. What's the best way? If I switch to landscape my login screen is only partially visible.

Upvotes: 0

Views: 1029

Answers (1)

Ryan Turnbull
Ryan Turnbull

Reputation: 3944

I would suggest using flex-box, which is built to handle not only this - but also screens with varying sizes.

Read up on it here: https://facebook.github.io/react-native/docs/flexbox.html

You can still use margins to move your design around, but flexing your components will lead to it working across multiple screen widths and heights.

Take a portrait screen for example, and placing a square in the top-middle with flex. If you were to rotate the screen, flex would have the dot still in the top middle of the now horiztonal-rectangle, and without, it would be in the middle of the first half of the screen ( What you might be experiencing ).

Upvotes: 1

Related Questions