1

I am trying to create a modal and have round edges on the modal, but the problem is with the modal container which I cannot seem to access.

Modal Wrapper:

<FlexboxLayout flexDirection="column" alignItems="flex-start" justifyContent="space-around" class="wil-modal">
</FlexboxLayout>

Wrapper Css:

.wil-modal {
  height: 310;
  width: 330;
  border-radius: 30;
  background-color: #3C5AFD;
  border-width: 3;
}

Modal has a white square Wrapper

I want to apply or remove the white wrapper that is containing my Flexbox.

Prajil Shrestha
  • 124
  • 1
  • 9
  • I believe the issue you are pointing is specific to Android, by default the [window's background color is set to white](https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/core/view/view.android.ts#L218). You will have to reset it to transparent once it's created to avoid the white corners. Also you might want to report this as a parity bug on Github. – Manoj Apr 17 '20 at 02:57
  • @PrajilShrestha have you found any solution? – no_fate Jun 29 '20 at 15:56
  • @no_fate we have set a workaround for this, ill post in the comment section. – Prajil Shrestha Jul 02 '20 at 05:54

1 Answers1

1

We figured out that wrapping the modal component with a modal stack tag like

<modal:ModalStack class="modal-container"> <--- this
<FlexboxLayout>
Modal content here
</FlexboxLayout>
</modal:ModalStack>

did the trick.

Prajil Shrestha
  • 124
  • 1
  • 9