How to do it...

If we want our app to adapt, we have to be able to answer several questions in our code:

  • How can we tell if the device is a tablet or a handset?
  • How can we learn if it's in the portrait or landscape modes?
  • How do we code a component that will render differently depending on the device type?
  • How can we make a component redraw itself automatically upon a screen orientation change?

Let's go over all these questions now. Let's first look at how we can learn about the device type and orientation. RN includes an API, Dimensions, that provides data that's necessary to render the app, such as the screen dimensions. How can we, then, learn the device type and orientation? The second question is easier: since there are no square devices ...

Get Modern JavaScript Web Development Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.