Margins on Page affects UI and breaks it on iOS

Which platform(s) does your issue occur on?

iOS/Android/Both

Please provide the following version numbers that your issue occurs with:

• CLI: 4.2.0
• Cross-platform modules: 4.2.0
• Runtime(s): 4.2.0

Please tell us how to recreate the issue in as much detail as possible.

Since {N} 4.0 setting margins, padding and size to a Page results in undefined/different behavior on both platforms. The reason is that on iOS we let the system lay out pages and these properties are ignored. However, they still take part in measure and affect the nested UI.

Proposed Solution: I think the correct behavior is to ignore these properties on the Page component and warn the user they will not take effect.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Can be reproduced with this playground:
https://play.nativescript.org/?template=play-tsc&id=l4geyI&v=3

The code that is important is:

Page {
    margin: 100;
}

ScrollView {
    margin: 10;
}

On Android it looks correct-ish. On iOS the Page margin is applied on the ScrollView and the ScrollView margin is lost.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Start with the linked NativeScript TypeScript playground and reproduce the Page and ScrollView margin behavior on iOS and Android using the reported 4.2.0 versions. Trace how Page margins, padding, and size participate in measurement, then verify that these properties no longer affect layout and that users receive a warning when they are set.