# Splash screen, inappbrowser fix, other changes - Fri/Sat 20th-21st Nov, 2020

## Inappbrowser

I had an issue with the inappbrowser (that I am using to show my company's login flow) was closing when the Android app was backgrounded. I finally managed to find a fix:

const iosOptions: InAppBrowserOptions = {
    modalPresentationStyle: 'fullScreen',
    modalEnabled: true,
    ephemeralWebSession: true,
}

const androidOptions: InAppBrowserOptions = {
    showTitle: false,
    toolbarColor: 'white',
    secondaryToolbarColor: 'white',
    forceCloseOnRedirection: false,
    showInRecents: true,
    enableUrlBarHiding: true,
    enableDefaultShare: false,
    hasBackButton: false,
}

// ...

const openIdentityPortal: OpenIdentityPortalArgs = async (client_id, scopes, redirect_uri, auth_endpoint) => {
    const url = 'www.auth.com'

    const response = await InAppBrowser.openAuth(
        url,
        redirect_uri,
        Platform.OS === 'ios' ? iosOptions : androidOptions
    )

    // user presses close button, return to welcome screen
    if (response.type === 'cancel') {
        navigation.canGoBack() && navigation.goBack()
    }

    if (response.type === 'success' && response.url && response.url.includes('code=')) {
        // set authStatus to unknown show splashscreen and prevent screen flickering when access token request is in progress
        setAuthStatus('unknown')
        Linking.openURL(redirect_uri)
        // return only the auth_code
        return extractAuthCode(response.url)
    }
    // TODO: prevent useIdentity hook from doing token exchange request if auth code retrieval is not successful
    throw new Error('Could not get auth code from log in process')
}

## Splash screen
I also added a splash screen on the native side for iOS and Android. It was straightforward.

Where I differed from other setups is I didn't want to add an extra dependency simply to prevent the white flash that happens just before the JS assets have all finishd loading. Instead, I simply set the root app background colour as the same as my splashscreen.

This means that the white flash is replaced, but it doesn't show the splash screen logo. On a production app, this is barely noticeable, and is, I think, a fair tradeoff so that I don't have to bloat the app with extra deps.

**iOS:** adjust `AppDelegate.m`:

rootView.backgroundColor = [[UIColor alloc] initWithRed:0.98f green:0.42f blue:0.09f alpha:1];

**Android**: adjust `styles.xml`:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">@color/black</item>
    <!-- Set root app background color same as splashscreen -->
    <item name="android:windowBackground">@color/splashscreen_bg</item>
    <item name="android:statusBarColor">@color/black</item>
</style>

###### tags: `programmingjournal` `2020` `C+` `splashscreen` `inappbrowser` `android`