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'; @@ -10,6 +11,7 @@ import ConnectSecondaryDevice from './connect-secondary-device.react.js'; import { QRAuthContextProvider } from './qr-auth-context-provider.js'; import QRAuthNotPrimaryDevice from './qr-auth-not-primary-device.react.js'; +import QRCodeScannerLeftButton from './qr-code-scanner-left-button.react.js'; 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'; @@ -54,6 +56,9 @@ const secondaryDeviceQRCodeScannerOptions = { headerTitle: deviceIsEmulator ? 'Link device' : '', headerBackTitleVisible: false, + headerLeft: (headerLeftProps: StackHeaderLeftButtonProps) => ( + + ), }; const disableGesturesScreenOptions = { headerLeft: null, diff --git a/native/account/qr-auth/qr-code-scanner-left-button.react.js b/native/account/qr-auth/qr-code-scanner-left-button.react.js new file mode 100644 --- /dev/null +++ b/native/account/qr-auth/qr-code-scanner-left-button.react.js @@ -0,0 +1,34 @@ +// @flow + +import Icon from '@expo/vector-icons/MaterialCommunityIcons.js'; +import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements'; +import * as React from 'react'; +import { TouchableOpacity } from 'react-native-gesture-handler'; + +import { useStyles } from '../../themes/colors.js'; + +type QRCodeScannerLeftButtonProps = React.ElementConfig< + typeof BaseHeaderBackButton, +>; +function QRCodeScannerLeftButton( + props: QRCodeScannerLeftButtonProps, +): React.Node { + const styles = useStyles(unboundStyles); + return ( + + + + ); +} + +const unboundStyles = { + closeButton: { + marginLeft: 10, + color: 'white', + textShadowColor: 'black', + textShadowOffset: { width: 0, height: 1 }, + textShadowRadius: 1, + }, +}; + +export default QRCodeScannerLeftButton;