Sign in Go Pro

Advanced React Native

Getting the Screen or a View's Dimensions

 
Autoplay

Up next

Previous

About

Flexbox makes it easy to design apps for multiple screen sizes, but it's sometimes necessary to calculate a fixed height or width based on the current screen size.

React Native provides Dimensions, which allows you to access the current size of the screen or window.

Views also call an onLayout callback prop after they know their width, height, x, and y values on the UI.

We will use both Dimensions and onLayout to calculate and set the width and height of the login image, so that it looks good on both small and large screen sizes.

Summary of Content:

  • Add a logo image to the Login page
  • Use Dimensions to resize the login image based on the device screen size
  • Use onLayout to resize the image based on the size of the parent component

Todo Logo Images:

[https://github.com/nanohop/react-native-advanced/tree/view-dimensions/TodoListAdvanced/src/images]

(https://github.com/nanohop/react-native-advanced/tree/view-dimensions/TodoListAdvanced/src/images)

Resources:

https://facebook.github.io/react-native/docs/dimensions.html

https://facebook.github.io/react-native/docs/view.html#onlayout

Instructor

Links

Comments

There are no comments on this lesson, start the conversation below ...

>
You need to go PRO to post comments.

Lessons in Advanced React Native