React Native SafeAreaView causes modal to show background

[btraut]

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• Are you running the latest SDK version?
• Are you reporting to the correct repository (magic-sdk)?

🐛 Description

PR #431 (released in v14.0.0) introduced SafeAreaView which is great for fixing issues where the close button would overlap the iOS status bar, but it caused the Magic web view to no longer be full screen. This causes the open animation (web view with drop shadow grows from center and fades in) to stop animating before it reaches full screen. Furthermore, it exposes and other screen background behind the web view.

Example:

🧩 Steps to Reproduce

1. Set a background color other than the Magic login screen (light or dark) for the full screen.
2. Trigger magic login.

🤔 Expected behavior

The Magic Relayer should be full screen, but it should contain a that wraps the web view inside. The background color needs to belong to the outer view.

🌎 Environment

Software	Version(s)
react-native-expo	14.0.0

[btraut]

I managed to hack my way a little deeper into this problem by overriding the Relayer component that @magic-sdk/react-native-expo uses, and I managed to extend the component to the edges of the screen.

The new problem is that the background color, drop shadow, and zoom transition all belong to the page being loaded in the web view. Is there any way to turn these things off? They all look bad because they don't zoom to fill the screen (they only fill the webview which is inset due to SafeAreaView).

[btraut]

I hacked even further, but I'm at an impasse. As it turns out, WebView lets you inject JS, so I'm able to create a stylesheet and modify styles of the box.magic.link page. I thought this would allow me to turn off the transitions, but unfortunately they belong to a further iframe for auth.magic.link which appears to be a React app that renders the box. Since it's a cross-domain iframe request, I'm unable to inject scripts into that page. Is there any way to make the request to auth.magic.link to tell it to disable the transitions (perhaps a "prefers-reduced-motion" flag)?

[Ariflo]

@btraut thanks for bringing this to our attention. We are investigating a solution and will get back to you as soon as we can.