diff --git a/packages/components/src/components/context/ThemeContext.tsx b/packages/components/src/components/context/ThemeContext.tsx index cd4ad816..5a15a691 100644 --- a/packages/components/src/components/context/ThemeContext.tsx +++ b/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 } diff --git a/packages/components/src/libs/browser/index-native.ts b/packages/components/src/libs/browser/index-native.ts index 92812b03..fe39e596 100644 --- a/packages/components/src/libs/browser/index-native.ts +++ b/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 diff --git a/packages/components/src/libs/browser/index.d.ts b/packages/components/src/libs/browser/index.d.ts index 6952fed7..302634d6 100644 --- a/packages/components/src/libs/browser/index.d.ts +++ b/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 diff --git a/packages/components/src/libs/browser/index.ios.ts b/packages/components/src/libs/browser/index.ios.ts index 0b122cc9..4c7ba003 100644 --- a/packages/components/src/libs/browser/index.ios.ts +++ b/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