Skip to content

Commit

Permalink
fix(suite-native): android navigation bar color on switching apps
Browse files Browse the repository at this point in the history
  • Loading branch information
PeKne committed Jan 21, 2025
1 parent 1de9499 commit 0eaa0df
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 25 deletions.
1 change: 1 addition & 0 deletions packages/styles/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ export * from './mergeStyleObjects';
export * from './mergeStyles';
export * from './breakpoints';
export * from './mediaQueries';
export * from './utils';
32 changes: 7 additions & 25 deletions suite-native/navigation/src/components/Screen.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { useEffect, useContext, ReactNode } from 'react';
import { ScrollViewProps, View, Platform } from 'react-native';
import { useContext, ReactNode } from 'react';
import { ScrollViewProps, View } from 'react-native';
import { EdgeInsets } from 'react-native-safe-area-context';
import { useSelector } from 'react-redux';
import { SystemBars, SystemBarStyle } from 'react-native-edge-to-edge';
import { SystemBars } from 'react-native-edge-to-edge';

import * as SystemUI from 'expo-system-ui';
import * as NavigationBar from 'expo-navigation-bar';
import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
import { useIsFocused, useRoute } from '@react-navigation/native';
import { useRoute } from '@react-navigation/native';

import { useOfflineBannerAwareSafeAreaInsets } from '@suite-native/connection-status';
import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
Expand All @@ -16,6 +14,7 @@ import { selectIsAnyBannerMessageActive } from '@suite-common/message-system';
import { Box } from '@suite-native/atoms';

import { ScreenContentWrapper } from './ScreenContentWrapper';
import { useAndroidNavigationBarStyle } from '../hooks/useAndroidNavigationBarStyle';

type ScreenProps = {
children: ReactNode;
Expand Down Expand Up @@ -103,36 +102,19 @@ export const Screen = ({
}: ScreenProps) => {
const {
applyStyle,
utils: { colors, isDarkColor, spacings },
utils: { spacings },
} = useNativeStyles();

const insets = useOfflineBannerAwareSafeAreaInsets();
const horizontalPadding = noHorizontalPadding ? 0 : spacings.sp16;
const bottomPadding = noBottomPadding ? 0 : spacings.sp16;
const hasBottomPadding = !useContext(BottomTabBarHeightContext) && hasBottomInset;
const backgroundCSSColor = colors[backgroundColor];
const systemBarsStyle: SystemBarStyle = isDarkColor(backgroundCSSColor) ? 'light' : 'dark';
const systemBarsStyle = useAndroidNavigationBarStyle({ backgroundColor });

const isMessageBannerDisplayed = useSelector(selectIsAnyBannerMessageActive);

const isFocused = useIsFocused();
const { name } = useRoute();

useEffect(() => {
if (isFocused) {
// this prevents some weird flashing of splash screen on Android during screen transitions
SystemUI.setBackgroundColorAsync(backgroundCSSColor);

// change colors of button navigation bar on Android
if (Platform.OS === 'android') {
NavigationBar.setBackgroundColorAsync(backgroundCSSColor);
NavigationBar.setButtonStyleAsync(
isDarkColor(backgroundCSSColor) ? 'light' : 'dark',
);
}
}
}, [backgroundCSSColor, isDarkColor, isFocused]);

return (
<View
style={applyStyle(screenContainerStyle, {
Expand Down
50 changes: 50 additions & 0 deletions suite-native/navigation/src/hooks/useAndroidNavigationBarStyle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { SystemBarStyle } from 'react-native-edge-to-edge';
import { useEffect } from 'react';
import { Platform, AppState } from 'react-native';

import * as SystemUI from 'expo-system-ui';
import { useIsFocused } from '@react-navigation/native';
import * as NavigationBar from 'expo-navigation-bar';

import { isDarkColor, useNativeStyles } from '@trezor/styles';
import { Color, CSSColor } from '@trezor/theme';

const adjustSystemBarStyleToBackground = (color: CSSColor) => {
if (Platform.OS === 'android') {
NavigationBar.setBackgroundColorAsync(color);
NavigationBar.setButtonStyleAsync(isDarkColor(color) ? 'light' : 'dark');
}
};

export const useAndroidNavigationBarStyle = ({ backgroundColor }: { backgroundColor: Color }) => {
const isFocused = useIsFocused();
const {
utils: { colors },
} = useNativeStyles();
const backgroundCSSColor = colors[backgroundColor];

const systemBarsStyle: SystemBarStyle = isDarkColor(backgroundCSSColor) ? 'light' : 'dark';

useEffect(() => {
const subscription = AppState.addEventListener('change', nextAppState => {
if (nextAppState === 'active' && isFocused) {
adjustSystemBarStyleToBackground(backgroundCSSColor);
}
});

return () => {
subscription.remove();
};
}, [backgroundCSSColor, isFocused]);

useEffect(() => {
if (isFocused) {
// this prevents some weird flashing of splash screen on Android during screen transitions
SystemUI.setBackgroundColorAsync(backgroundCSSColor);

adjustSystemBarStyleToBackground(backgroundCSSColor);
}
}, [backgroundCSSColor, isFocused]);

return systemBarsStyle;
};

0 comments on commit 0eaa0df

Please sign in to comment.