Tell us about the problem
This aims to serve as an epic issue where to gather and discuss existing safe area problems with NativeScript 4.0, how to resolve them and store beneficial information on the topic.
Related resources:
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
https://developer.apple.com/videos/play/fall2017/201/
https://developer.apple.com/videos/play/fall2017/801/
https://medium.com/rosberryapps/ios-safe-area-ca10e919526f
Proposed solution:
The iOS guidelines state that content should be constraint to the safe area. All the native iOS UIKit components handle these guidelines out of the box. However, {N} has its own layout system that differs from the iOS one and we should handle this ourselves. We can classify {N} components as two types - content components (those that are meaningful by themselves and show content) and container components (those that are used to contain other components and as layouts, are not meaningful just by themselves). The idea is to have all container components stretch outside the iOS safe area and have all content components lay out in the safe area. This basically means the backgrounds of the container components will be seen to the limits of the screen. Here is a list of the container components:
- ListView (special case*)
- ScrollView (special case*)
- WebView (special case*)
- Repeater
- GridLayout
- StackLayout
- AbsoluteLayout
- DockLayout
- FlexboxLayout
- WrapLayout
special case* - according to guidelines all scrollable containers should scroll their content beyond top/bottom constraint.
Related issues:
Action Items:
- @vchimev: Automate templates verification against iPhone 7/8 and iPhone X.
Currently, there are builds only against iPhone 7. TODO: Add verifications for iPhone X.
Reactions are currently unavailable
Tell us about the problem
This aims to serve as an epic issue where to gather and discuss existing safe area problems with NativeScript 4.0, how to resolve them and store beneficial information on the topic.
Related resources:
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
https://developer.apple.com/videos/play/fall2017/201/
https://developer.apple.com/videos/play/fall2017/801/
https://medium.com/rosberryapps/ios-safe-area-ca10e919526f
Proposed solution:
The iOS guidelines state that content should be constraint to the safe area. All the native iOS UIKit components handle these guidelines out of the box. However, {N} has its own layout system that differs from the iOS one and we should handle this ourselves. We can classify {N} components as two types - content components (those that are meaningful by themselves and show content) and container components (those that are used to contain other components and as layouts, are not meaningful just by themselves). The idea is to have all container components stretch outside the iOS safe area and have all content components lay out in the safe area. This basically means the backgrounds of the container components will be seen to the limits of the screen. Here is a list of the container components:
special case* - according to guidelines all scrollable containers should scroll their content beyond top/bottom constraint.
Related issues:
Action Items:
Currently, there are builds only against iPhone 7. TODO: Add verifications for iPhone X.