diff --git a/native/account/qr-auth/qr-auth-navigator.react.js b/native/account/qr-auth/qr-auth-navigator.react.js --- a/native/account/qr-auth/qr-auth-navigator.react.js +++ b/native/account/qr-auth/qr-auth-navigator.react.js @@ -1,6 +1,7 @@ // @flow import type { + StackHeaderLeftButtonProps, StackNavigationHelpers, StackNavigationProp, } from '@react-navigation/core'; @@ -13,6 +14,7 @@ import SecondaryDeviceConnected from './secondary-device-connected.react.js'; import SecondaryDeviceNotResponding from './secondary-device-not-responding.react.js'; import SecondaryDeviceQRCodeScanner from './secondary-device-qr-code-scanner.react.js'; +import HeaderCloseLeftButton from '../../navigation/header-close-left-button.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import { ConnectSecondaryDeviceRouteName, @@ -51,9 +53,18 @@ }, gestureEnabled: true, }; +const headerCloseLeftButtonStyle = { + paddingLeft: 10, +}; const secondaryDeviceQRCodeScannerOptions = { headerTitle: deviceIsEmulator ? 'Link device' : '', headerBackTitleVisible: false, + headerLeft: (headerLeftProps: StackHeaderLeftButtonProps) => ( + + ), }; const disableGesturesScreenOptions = { headerLeft: null, diff --git a/native/navigation/header-close-left-button.react.js b/native/navigation/header-close-left-button.react.js new file mode 100644 --- /dev/null +++ b/native/navigation/header-close-left-button.react.js @@ -0,0 +1,34 @@ +// @flow + +import * as React from 'react'; +import { Text } from 'react-native'; +import { TouchableOpacity } from 'react-native-gesture-handler'; + +import { useStyles } from '../themes/colors.js'; +import type { ViewStyle } from '../types/styles.js'; + +type HeaderCloseLeftButtonProps = { + +onPress?: () => mixed, + +style?: ViewStyle, +}; +function HeaderCloseLeftButton(props: HeaderCloseLeftButtonProps): React.Node { + const { onPress, style } = props; + const styles = useStyles(unboundStyles); + return ( + + × + + ); +} + +const unboundStyles = { + closeIcon: { + color: 'white', + fontSize: 36, + textShadowColor: 'black', + textShadowOffset: { width: 0, height: 1 }, + textShadowRadius: 1, + }, +}; + +export default HeaderCloseLeftButton;