Skip to content

Commit 4e5799f

Browse files
committed
fix: resolve Keystone QR scan button doing nothing
The button did nothing due to two issues: 1. Navigation targeted the root stack, rendering the scanner behind the modal. Fixed by navigating to KeystoneNavigator within the AddNewAccountNavigator stack. 2. The useCamera hook's async permission check caused a race condition where hasPermission was always false on first tap, and the fallback BottomSheetModal failed silently inside a ScrollView. Removed the redundant permission gate entirely — DynamicQrScanner already handles all camera permission states on mount.
1 parent b59db9b commit 4e5799f

File tree

2 files changed

+4
-148
lines changed

2 files changed

+4
-148
lines changed

src/features/keystone/ConnectKeystoneStartScreen.tsx

Lines changed: 4 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,18 @@
1-
/* eslint-disable react/jsx-props-no-spreading */
21
import Box from '@components/Box'
32
import ButtonPressable from '@components/ButtonPressable'
43
import SafeAreaBox from '@components/SafeAreaBox'
54
import Text from '@components/Text'
65
import { useNavigation } from '@react-navigation/native'
7-
import WarningKeystone from '@assets/images/warningKeystone.svg'
8-
import React, {
9-
forwardRef,
10-
ReactNode,
11-
Ref,
12-
useCallback,
13-
useImperativeHandle,
14-
useMemo,
15-
useRef,
16-
} from 'react'
17-
import useCamera from '@hooks/useCamera'
18-
import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet'
19-
import { useOpacity, useSpacing } from '@theme/themeHooks'
20-
import useBackHandler from '@hooks/useBackHandler'
21-
import { useTheme } from '@shopify/restyle'
6+
import React, { useCallback } from 'react'
227
import { t } from 'i18next'
23-
import { Image, Linking, Platform } from 'react-native'
8+
import { Image } from 'react-native'
249
import { AddNewAccountNavigationProp } from '../home/addNewAccount/addNewAccountTypes'
2510

26-
type CameraPermissionBottomSheetAlertRef = {
27-
show: () => void
28-
dismiss: () => void
29-
}
30-
31-
const CameraPermissionBottomSheetAlert = forwardRef(
32-
(
33-
{ children }: { children: ReactNode },
34-
ref: Ref<CameraPermissionBottomSheetAlertRef>,
35-
) => {
36-
useImperativeHandle(ref, () => ({
37-
show: () => {
38-
bottomSheetModalRef.current?.present()
39-
},
40-
dismiss: () => {
41-
bottomSheetModalRef.current?.dismiss()
42-
},
43-
}))
44-
45-
const bottomSheetModalRef = useRef<BottomSheetModal>(null)
46-
const { backgroundStyle } = useOpacity('surfaceSecondary', 1)
47-
const { m } = useSpacing()
48-
const { colors } = useTheme()
49-
const snapPoints = useMemo(() => ['40%'], [])
50-
const sheetHandleStyle = useMemo(() => ({ padding: m }), [m])
51-
const { handleDismiss } = useBackHandler(bottomSheetModalRef)
52-
const handleIndicatorStyle = useMemo(() => {
53-
return {
54-
backgroundColor: colors.secondaryText,
55-
}
56-
}, [colors.secondaryText])
57-
const renderBackdrop = useCallback(
58-
(props) => (
59-
<BottomSheetBackdrop
60-
disappearsOnIndex={-1}
61-
appearsOnIndex={0}
62-
// eslint-disable-next-line react/jsx-props-no-spreading
63-
{...props}
64-
/>
65-
),
66-
[],
67-
)
68-
69-
return (
70-
<BottomSheetModal
71-
ref={bottomSheetModalRef}
72-
index={0}
73-
backgroundStyle={backgroundStyle}
74-
backdropComponent={renderBackdrop}
75-
snapPoints={snapPoints}
76-
handleStyle={sheetHandleStyle}
77-
onDismiss={handleDismiss}
78-
handleIndicatorStyle={handleIndicatorStyle}
79-
>
80-
{children}
81-
</BottomSheetModal>
82-
)
83-
},
84-
)
85-
86-
const WarningContent = () => {
87-
const handleOpenSettings = () => {
88-
if (Platform.OS === 'ios') {
89-
Linking.openURL('app-settings:')
90-
} else {
91-
Linking.openSettings()
92-
}
93-
}
94-
return (
95-
<SafeAreaBox
96-
flex={1}
97-
justifyContent="center"
98-
marginHorizontal="l"
99-
edges={['bottom']}
100-
>
101-
<Box flex={1} justifyContent="center">
102-
<Box alignItems="center">
103-
<WarningKeystone />
104-
<Text variant="body0" textAlign="center" marginVertical="l">
105-
{t('keystone.connectKeystoneStart.warning') as string}
106-
</Text>
107-
</Box>
108-
</Box>
109-
<ButtonPressable
110-
borderRadius="round"
111-
onPress={handleOpenSettings}
112-
backgroundColor="primaryText"
113-
backgroundColorOpacityPressed={0.7}
114-
backgroundColorDisabled="surfaceSecondary"
115-
backgroundColorDisabledOpacity={0.5}
116-
titleColorDisabled="black500"
117-
titleColor="primary"
118-
fontWeight="500"
119-
title={t('keystone.connectKeystoneStart.ok')}
120-
marginBottom="l"
121-
/>
122-
</SafeAreaBox>
123-
)
124-
}
125-
12611
const ConnectKeystoneStart = () => {
127-
const { hasPermission } = useCamera()
128-
const cameraPermissionBottomSheetAlertRef =
129-
useRef<CameraPermissionBottomSheetAlertRef>(null)
13012
const navigation = useNavigation<AddNewAccountNavigationProp>()
13113
const handleStart = useCallback(() => {
132-
if (!hasPermission) {
133-
cameraPermissionBottomSheetAlertRef.current?.show()
134-
} else {
135-
navigation.navigate('KeystoneNavigator')
136-
}
137-
}, [navigation, hasPermission])
14+
navigation.navigate('KeystoneNavigator')
15+
}, [navigation])
13816
return (
13917
<SafeAreaBox
14018
flex={1}
@@ -155,11 +33,6 @@ const ConnectKeystoneStart = () => {
15533
</Text>
15634
</Box>
15735
</Box>
158-
<CameraPermissionBottomSheetAlert
159-
ref={cameraPermissionBottomSheetAlertRef}
160-
>
161-
<WarningContent />
162-
</CameraPermissionBottomSheetAlert>
16336
<ButtonPressable
16437
borderRadius="round"
16538
onPress={handleStart}

src/hooks/useCamera.ts

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)