RootLayout open under Modal !

Issue Description

Hi,

If we open a modal view the we try from it to open a RootLayout popup, the root layout will be displayed under the modal view (will not be shown if the modal hase fullscreen to true)

Reproduction

Please consider this sample project, it doesn't work with playground because RootLayout not present on the playground yet!

Relevant log output (if applicable)

No response

Environment

OS: macOS 12.4
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Shell: /usr/local/bin/fish
node: 14.18.0
npm: 8.0.0
nativescript: 8.3.2

# android
java: 1.8.0_121
ndk: 16.1.4479499
apis: 28, 29
build_tools: 28.0.3
system_images: 
  - android-28 | Google APIs Intel x86 Atom

# ios
xcode: 13.1/13A1030d
cocoapods: 1.11.3
python: 3.9.10
python3: 3.9.10
ruby: 2.6.8
platforms: 
  - DriverKit 21.0.1
  - iOS 15.0
  - macOS 12.0
  - tvOS 15.0
  - watchOS 8.0

Dependencies

"dependencies": {
  "@kefah/nativescript-uuid": "^1.0.1",
  "@nativescript-community/fonticon": "^3.0.0",
  "@nativescript-community/ui-collectionview": "^4.0.57",
  "@nativescript-community/ui-material-bottom-navigation": "^7.0.25",
  "@nativescript-community/ui-material-bottomnavigationbar": "^7.0.25",
  "@nativescript-community/universal-links": "^3.0.0",
  "@nativescript/appversion": "^2.0.0",
  "@nativescript/core": "^8.3.1",
  "@nativescript/datetimepicker": "^2.1.11",
  "@nativescript/firebase": "^11.1.3",
  "@nativescript/geolocation": "^8.0.2",
  "@nativescript/iqkeyboardmanager": "^2.0.0",
  "@nativescript/localize": "^5.0.4",
  "@nativescript/secure-storage": "^3.0.0",
  "@nativescript/theme": "^3.0.2",
  "@nstudio/nativescript-cardview": "^2.0.1",
  "@nstudio/nativescript-fancyalert": "^4.0.1",
  "@nstudio/nativescript-filterable-listpicker": "^3.0.1",
  "@nstudio/nativescript-loading-indicator": "^4.1.2",
  "@triniwiz/nativescript-toasty": "^4.1.3",
  "@types/google-libphonenumber": "^7.4.23",
  "base-64": "^1.0.0",
  "build-url-ts": "^6.1.3",
  "crypto-js": "^4.1.1",
  "email-validator": "^2.0.4",
  "google-libphonenumber": "^3.2.29",
  "moment": "^2.29.4",
  "nativescript": "^8.2.3",
  "nativescript-feedback": "^2.0.0",
  "nativescript-intl": "^4.0.2",
  "nativescript-modal-datetimepicker": "^2.1.5",
  "nativescript-phone": "^3.0.3",
  "nativescript-ui-autocomplete": "^8.0.1",
  "nativescript-ui-listview": "^10.2.7",
  "nativescript-ui-sidedrawer": "^10.0.2",
  "rxjs": "^7.5.6",
  "url-parse": "^1.5.10",
  "utf8": "^3.0.0",
  "uuid": "^8.3.2"
},
"devDependencies": {
  "@nativescript/android": "8.3.1",
  "@nativescript/ios": "8.2.3",
  "@nativescript/types": "~8.2.0",
  "@nativescript/webpack": "~5.0.6",
  "typescript": "~4.5.5"
}

Please accept these terms

• [X] I have searched the existing issues as well as StackOverflow and this has not been posted before
• [X] This is a bug report
• [X] I agree to follow this project's Code of Conduct

If the RootLayout is not defined in the Modal itself (ie. the component that is passed to showModal) then it is expected that it will render below the modal, since the modals are shown on top of everything with a different stacking context (RootLayout is a glorified GridLayout that handles the stacking for you, modals are using the system dialog APIs)

Thanks, I've tried to define the Rootlayout in the modal itself but same result!

What should do in order to show the RootLayout at the top of the modal ?

Thanks, I've tried to define the Rootlayout in the modal itself but same result!

What should do in order to show the RootLayout at the top of the modal ?

The correct approach is to add root layout inside modal view, as Igor mentioned above. Which platform was used to reproduce this? Does it occur in both platforms?