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
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