[iOS] Fix in app browser background and status bar

https://github.com/naoufal/react-native-safari-view/issues/95

packages/components/src/components/context/ThemeContext.tsx

@@ -1,8 +1,15 @@
 import { Theme } from '@devhub/core'
 import { useReduxState } from '../../hooks/use-redux-state'
+import { Browser } from '../../libs/browser'
 import * as selectors from '../../redux/selectors'
+import { getColumnHeaderThemeColors } from '../columns/ColumnHeader'
 
 export function useTheme(callback?: (theme: Theme) => void) {
   const theme = useReduxState(selectors.themeSelector, callback)
+
+  const headerThemeColors = getColumnHeaderThemeColors(theme.backgroundColor)
+  Browser.setBackgroundColor(theme[headerThemeColors.normal])
+  Browser.setForegroundColor(theme.foregroundColor)
+
   return theme
 }

packages/components/src/libs/browser/index-native.ts

@@ -12,5 +12,7 @@ export const Browser: BrowserCrossPlatform = {
   },
   dismiss: () => undefined,
   openURL: Linking.openURL,
+  setBackgroundColor: () => undefined,
+  setForegroundColor: () => undefined,
 }
 ;(Browser as any)._validateURL = (Linking as any)._validateURL

packages/components/src/libs/browser/index.d.ts

@@ -9,6 +9,8 @@ export interface BrowserCrossPlatform {
   }
   dismiss(): void
   openURL(url: string): void
+  setBackgroundColor(color: string): void
+  setForegroundColor(color: string): void
 }
 
 export const Browser: BrowserCrossPlatform

packages/components/src/libs/browser/index.ios.ts

@@ -1,10 +1,12 @@
-import { StatusBar } from 'react-native'
-import SafariView, { SafaryOptions } from 'react-native-safari-view'
+import SafariView from 'react-native-safari-view'
 
 import { BrowserCrossPlatform } from '.'
 import { bugsnag } from '../bugsnag'
 import { Linking } from '../linking'
 
+let backgroundColor: string
+let foregroundColor: string
+
 export const Browser: BrowserCrossPlatform = {
   ...SafariView,
   addEventListener: (e: any, handler: any) => {
@@ -20,15 +22,17 @@ export const Browser: BrowserCrossPlatform = {
     console.debug('[BROWSER] Unknown removeEventListener event', e) // tslint:disable-line no-console
   },
   dismiss: SafariView.dismiss,
-  openURL: (url: string, options?: SafaryOptions) => {
+  openURL: url => {
     SafariView.isAvailable()
       .then(isAvailable => {
         if (!isAvailable) throw new Error('SafariView not available.')
 
         return SafariView.show({
           url,
-          tintColor: '#000000',
-          ...options,
+          barTintColor: backgroundColor,
+          tintColor: foregroundColor,
+          fromBottom: false,
+          readerMode: false,
         })
       })
       .catch(error => {
@@ -36,21 +40,20 @@ export const Browser: BrowserCrossPlatform = {
         bugsnag.notify(error, { description })
         console.error(description, error, {
           url,
-          ...options,
+          backgroundColor,
+          foregroundColor,
         })
         return Linking.openURL(url)
       })
   },
+  setBackgroundColor: color => {
+    backgroundColor = color
+  },
+  setForegroundColor: color => {
+    foregroundColor = color
+  },
 }
 
-SafariView.addEventListener('onShow', () => {
-  StatusBar.setHidden(true, 'none')
-})
-
-SafariView.addEventListener('onDismiss', () => {
-  StatusBar.setHidden(false, 'fade')
-})
-
 Linking.addEventListener('url', ({ url }) => {
   if (!(url && url.startsWith('devhub://'))) return