Skip to content

UI: refactor universal back button and deduplicate navigation header #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
theanmolsharma merged 1 commit into from
Jul 31, 2026
Merged

UI: refactor universal back button and deduplicate navigation header #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 27 additions & 35 deletions components/navigationStyle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,51 +79,44 @@ const navigationStyle = (
return theme =>
({ navigation, route }) => {
const isFirstRouteInStack = navigation.getState().index === 0;
const isModal = route.params?.presentation === 'modal' || route.params?.presentation === 'transparentModal';
const isFormSheet = route.params?.presentation === 'formSheet';
const isModal = opts.presentation === 'modal' || opts.presentation === 'transparentModal';
const isFormSheet = opts.presentation === 'formSheet';

const closeButton = getCloseButtonPosition(closeButtonPosition, isFirstRouteInStack, isModal);
const handleClose = getHandleCloseAction(onCloseButtonPressed, navigation, route);

let headerRight;
let headerLeft;

const renderCloseButton = () => (
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.close}
style={isFormSheet ? [styles.buttonFormSheet, { backgroundColor: theme.colors.lightButton }] : styles.button}
onPress={handleClose}
testID="NavigationCloseButton"
>
<Image source={theme.closeImage} />
</TouchableOpacity>
);

if (closeButton === CloseButtonPosition.Right) {
headerRight = () => (
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.close}
style={isFormSheet ? [styles.buttonFormSheet, { backgroundColor: theme.colors.lightButton }] : styles.button}
onPress={handleClose}
testID="NavigationCloseButton"
>
<Image source={theme.closeImage} />
</TouchableOpacity>
);
headerRight = renderCloseButton;
} else if (closeButton === CloseButtonPosition.Left) {
headerLeft = () => (
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.close}
style={isFormSheet ? [styles.buttonFormSheet, { backgroundColor: theme.colors.lightButton }] : styles.button}
onPress={handleClose}
testID="NavigationCloseButton"
>
<Image source={theme.closeImage} />
</TouchableOpacity>
);
headerLeft = renderCloseButton;
}

if (!headerLeft && !isFirstRouteInStack) {
headerLeft = () => (
<HeaderBackButton
color={theme.colors.foregroundColor}
onPress={() => {
Keyboard.dismiss();
navigation.goBack();
}}
/>
);
if (closeButton === CloseButtonPosition.None) {
headerLeft = (props: any) =>
props.canGoBack ? (
<HeaderBackButton
color={theme.colors.backButtonIcon}
onPress={() => {
Keyboard.dismiss();
navigation.goBack();
}}
/>
) : null;
}

const baseHeaderStyle = {
Expand All @@ -135,7 +128,6 @@ const navigationStyle = (
color: theme.colors.foregroundColor,
},
headerTintColor: theme.colors.foregroundColor,
headerBackButtonDisplayMode: 'minimal' as const,
};
const isLeftCloseButtonAndroid = closeButton === CloseButtonPosition.Left && Platform.OS === 'android';

Expand Down
4 changes: 3 additions & 1 deletion components/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const palette = {
gray400: '#9AA0AA',
gray450: '#99A1AF',
gray500: '#81868E',
gray700: '#545454',
gray800: '#3A3A3C',
gray850: '#313030',
gray900: '#202020',
Expand Down Expand Up @@ -84,6 +85,7 @@ const tokens = {
receiveBackground: pair('#D1F9D6', 'rgba(210,248,214,.2)'),
navigationBarColor: pair(palette.white, palette.gray800),
androidRippleColor: pair('#CCCCCC', '#444444'),
backButtonIcon: pair(palette.black, palette.gray700),
// Brand violet in both modes, matching master #123. Also the canonical token for the former
// buttonBackgroundColor / mainColor / feeValue, which were identical in both schemes.
primary: same(palette.violet600),
Expand Down Expand Up @@ -128,7 +130,7 @@ const tokens = {
bannerBorderColor: pair(palette.violet100, '#2D264F'),
scanBtnBorderColor: pair(palette.violet100, '#241F3B'),
settingsBtnBackground: pair('#F6F7F9', '#141414'),
settingsBtnIconColor: pair('#545454', '#AAAAAA'),
settingsBtnIconColor: pair(palette.gray700, '#AAAAAA'),
searchIconBackground: pair(palette.white, '#0D0D0D'),
shieldIconBackground: pair('#FAF5FF', palette.violet900),
shieldIconBorder: pair('#F3E8FF', '#181818'),
Expand Down
47 changes: 8 additions & 39 deletions navigation/SendDetailsStack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React from 'react';
import { Keyboard } from 'react-native';
import { NativeStackNavigationOptions, createNativeStackNavigator } from '@react-navigation/native-stack';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import navigationStyle from '../components/navigationStyle';
import HeaderBackButton from '../components/HeaderBackButton';
import { Theme, useTheme } from '../components/themes';
import { useTheme } from '../components/themes';
import loc from '../loc';
import {
CoinControlComponent,
Expand All @@ -20,24 +18,6 @@ import SelectFeeScreen from '../screen/SelectFeeScreen';

const Stack = createNativeStackNavigator<SendDetailsStackParamList>();

// SendDetails is the initial route of this nested stack (index 0), so navigationStyle's
// default back chevron doesn't apply to it and it needs its own headerLeft.
const withBackChevron = (
options: NativeStackNavigationOptions,
{ theme, navigation }: { theme: Theme; navigation: any },
): NativeStackNavigationOptions => ({
...options,
headerLeft: () => (
<HeaderBackButton
color={theme.colors.foregroundColor}
onPress={() => {
Keyboard.dismiss();
navigation.goBack();
}}
/>
),
});

const SendDetailsStack = () => {
const theme = useTheme();

Expand All @@ -46,25 +26,14 @@ const SendDetailsStack = () => {
<Stack.Screen
name="SendDetails"
component={SendDetailsComponent}
options={navigationStyle(
{
title: loc.send.header,
statusBarStyle: 'light',
},
withBackChevron,
)(theme)}
options={navigationStyle({
title: loc.send.header,
statusBarStyle: 'light',
})(theme)}
initialParams={{ isEditable: true, feeUnit: BitcoinUnit.BTC, amountUnit: BitcoinUnit.BTC }} // Correctly typed now
/>
<Stack.Screen
name="SelectFee"
component={SelectFeeScreen}
options={navigationStyle({ title: loc.send.network_fee_header }, withBackChevron)(theme)}
/>
<Stack.Screen
name="Confirm"
component={ConfirmComponent}
options={navigationStyle({ title: loc.send.confirm_header }, withBackChevron)(theme)}
/>
<Stack.Screen name="SelectFee" component={SelectFeeScreen} options={navigationStyle({ title: loc.send.network_fee_header })(theme)} />
<Stack.Screen name="Confirm" component={ConfirmComponent} options={navigationStyle({ title: loc.send.confirm_header })(theme)} />
<Stack.Screen
name="PsbtWithHardwareWallet"
component={PsbtWithHardwareWalletComponent}
Expand Down
Loading