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, make sure to pass your custom background color to magic.Relayer:
`tsx

`

🙌🏾 Troubleshooting

$3

For React Native projects living within a monorepo that run into the following TypeError: Undefined is not an object error:

When attempting to import Magic, take note that the React Native metro bundler doesn’t work well with symlinks, which tend to be utilized by most package managers.

For this issue consider using Microsoft's rnx-kit suite of tools that include a plugin for metro that fixes this symlink related error.

$3

`json
{
"code": "MODAL_NOT_READY",
"rawMessage": "Modal is not ready."
}
`


It is good practice to use @react-native-community/netinfo to track the internet connection state of the device. For your convenience, we've also added a hook that uses this library behind the scenes:


`tsx
import { useInternetConnection } from '@magic-sdk/react-native-expo';

const magic = new Magic('YOUR_API_KEY');

const connected = useInternetConnection()

useEffect(() => {
if (!connected) {
// Unomount this component and show your "You're offline" screen.
}
}, [connected])

export default function App() {
return <>

{/ Render the Magic iframe! /}

{...}


}
``