Merge pull request #661 from magiclabs/rominhalltari-sc-70361-react-n…

…ative-sdks-react-native-safeareaview

Adds optional backgroundColor prop to Relayer component

packages/@magic-sdk/react-native-bare/README.md

@@ -65,3 +65,8 @@ await magic.auth.loginWithEmailOTP({ email: 'your.email@example.com' });
 
 ## 👀 SafeAreaView
 Please note that as of **v14.0.0** our React Native package offerings wrap the `<magic.Relayer />` in [react-native-safe-area-context's](https://github.com/th3rdwave/react-native-safe-area-context) `<SafeAreaView />`. To prevent any adverse behavior in your app, please place the Magic iFrame React component at the root view of your application wrapped in a [SafeAreaProvider](https://github.com/th3rdwave/react-native-safe-area-context#safeareaprovider) as described in the documentation. 
+
+We have also added an optional `backgroundColor` prop to the `Relayer` to fix issues with `SafeAreaView` showing the background. By default, the background will be white. If you have changed the background color as part of your [custom branding setup](https://magic.link/docs/authentication/features/login-ui#configuration), make sure to pass your custom background color to `magic.Relayer`:
+```tsx
+<magic.Relayer backgroundColor="#0000FF"/>
+```

packages/@magic-sdk/react-native-bare/src/react-native-webview-controller.tsx

@@ -9,6 +9,7 @@ import Global = NodeJS.Global;
 
 const MAGIC_PAYLOAD_FLAG_TYPED_ARRAY = 'MAGIC_PAYLOAD_FLAG_TYPED_ARRAY';
 const OPEN_IN_DEVICE_BROWSER = 'open_in_device_browser';
+const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
 
 /**
  * Builds the Magic `<WebView>` overlay styles. These base styles enable
@@ -76,7 +77,7 @@ export class ReactNativeWebViewController extends ViewController {
   // is sufficient (this logic is stable right now and not expected to change in
   // the forseeable future).
   /* istanbul ignore next */
-  public Relayer: React.FC = () => {
+  public Relayer: React.FC<{ backgroundColor?: string }> = (backgroundColor) => {
     const [show, setShow] = useState(false);
 
     /**
@@ -114,7 +115,15 @@ export class ReactNativeWebViewController extends ViewController {
     }, []);
 
     const containerStyles = useMemo(() => {
-      return [this.styles['webview-container'], show ? this.styles.show : this.styles.hide];
+      return [
+        this.styles['webview-container'],
+        show
+          ? {
+              ...this.styles.show,
+              backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+            }
+          : this.styles.hide,
+      ];
     }, [show]);
 
     const handleWebViewMessage = useCallback((event: any) => {

packages/@magic-sdk/react-native-expo/src/react-native-webview-controller.tsx

@@ -9,6 +9,7 @@ import Global = NodeJS.Global;
 
 const MAGIC_PAYLOAD_FLAG_TYPED_ARRAY = 'MAGIC_PAYLOAD_FLAG_TYPED_ARRAY';
 const OPEN_IN_DEVICE_BROWSER = 'open_in_device_browser';
+const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
 
 /**
  * Builds the Magic `<WebView>` overlay styles. These base styles enable
@@ -76,7 +77,7 @@ export class ReactNativeWebViewController extends ViewController {
   // is sufficient (this logic is stable right now and not expected to change in
   // the forseeable future).
   /* istanbul ignore next */
-  public Relayer: React.FC = () => {
+  public Relayer: React.FC<{ backgroundColor?: string }> = ({ backgroundColor }) => {
     const [show, setShow] = useState(false);
 
     /**
@@ -114,7 +115,15 @@ export class ReactNativeWebViewController extends ViewController {
     }, []);
 
     const containerStyles = useMemo(() => {
-      return [this.styles['webview-container'], show ? this.styles.show : this.styles.hide];
+      return [
+        this.styles['webview-container'],
+        show
+          ? {
+              ...this.styles.show,
+              backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+            }
+          : this.styles.hide,
+      ];
     }, [show]);
 
     const handleWebViewMessage = useCallback((event: any) => {