Skip to content
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

Jump to bottom

feat: modify the toggle button with icons in biometrics screen #1281

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: modify the toggle button with icons in biometrics screen #1281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8814eaf
feat: modify the toggle button with icons in biometrics screen
FarjadGov14 Oct 10, 2024
ee33849
feat: update snapshot tests
FarjadGov14 Oct 10, 2024
2af82ce
feat: fix lint
FarjadGov14 Oct 10, 2024
811174e
Merge branch 'main' of github.com:FarjadGov14/bifold-aries-mobile-age…
FarjadGov14 Oct 10, 2024
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
76 changes: 63 additions & 13 deletions packages/legacy/core/App/screens/UseBiometry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,18 @@ import { CommonActions, useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import React, { useState, useEffect, useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View, Modal, Switch, ScrollView, Pressable, DeviceEventEmitter } from 'react-native'
import {
StyleSheet,
Text,
View,
Modal,
ScrollView,
Pressable,
DeviceEventEmitter,
Animated,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import Icon from 'react-native-vector-icons/MaterialIcons'

import Button, { ButtonType } from '../components/buttons/Button'
import { EventTypes } from '../constants'
Expand Down Expand Up @@ -33,12 +43,11 @@ const UseBiometry: React.FC = () => {
const [continueEnabled, setContinueEnabled] = useState(true)
const [canSeeCheckPIN, setCanSeeCheckPIN] = useState<boolean>(false)
const { ColorPallet, TextTheme, Assets } = useTheme()
const [toggleAnim] = useState(new Animated.Value(biometryEnabled ? 1 : 0))
const { ButtonLoading } = useAnimatedComponents()
const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
const screenUsage = useMemo(() => {
return store.onboarding.didCompleteOnboarding
? UseBiometryUsage.ToggleOnOff
: UseBiometryUsage.InitialSetup
return store.onboarding.didCompleteOnboarding ? UseBiometryUsage.ToggleOnOff : UseBiometryUsage.InitialSetup
}, [store.onboarding.didCompleteOnboarding])

const styles = StyleSheet.create({
Expand All @@ -59,7 +68,7 @@ const UseBiometry: React.FC = () => {
setBiometryAvailable(result)
})
}, [isBiometricsActive])

useEffect(() => {
if (screenUsage === UseBiometryUsage.InitialSetup) {
return
Expand Down Expand Up @@ -115,6 +124,25 @@ const UseBiometry: React.FC = () => {
setBiometryEnabled((previousState) => !previousState)
}, [screenUsage])

const handleToggle = () => {
Animated.timing(toggleAnim, {
toValue: biometryEnabled ? 0 : 1,
duration: 200,
useNativeDriver: false,
}).start()
toggleSwitch()
}

const backgroundColor = toggleAnim.interpolate({
inputRange: [0, 1],
outputRange: [ColorPallet.grayscale.lightGrey, ColorPallet.brand.primaryDisabled],
})

const translateX = toggleAnim.interpolate({
inputRange: [0, 1],
outputRange: [2, 25],
})

const onAuthenticationComplete = useCallback((status: boolean) => {
// If successfully authenticated the toggle may proceed.
if (status) {
Expand Down Expand Up @@ -161,15 +189,37 @@ const UseBiometry: React.FC = () => {
accessible
accessibilityLabel={t('Biometry.Toggle')}
accessibilityRole={'switch'}
onPress={handleToggle}
disabled={!biometryAvailable}
>
<Switch
trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
thumbColor={biometryEnabled ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
ios_backgroundColor={ColorPallet.grayscale.lightGrey}
onValueChange={toggleSwitch}
value={biometryEnabled}
disabled={!biometryAvailable}
/>
<Animated.View
style={{
width: 55,
height: 30,
borderRadius: 25,
backgroundColor,
padding: 3,
justifyContent: 'center',
}}
>
<Animated.View
style={{
transform: [{ translateX }],
width: 25,
height: 25,
borderRadius: 20,
backgroundColor: ColorPallet.brand.secondary,
justifyContent: 'center',
alignItems: 'center',
}}
>
{biometryEnabled ? (
<Icon name="check" size={15} color={ColorPallet.brand.primary} />
) : (
<Icon name="close" size={15} color={ColorPallet.grayscale.mediumGrey} />
)}
</Animated.View>
</Animated.View>
</Pressable>
</View>
</View>
Expand Down
225 changes: 159 additions & 66 deletions packages/legacy/core/__tests__/screens/__snapshots__/UseBiometry.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ exports[`UseBiometry Screen Renders correctly when biometry available 1`] = `
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"disabled": false,
"expanded": undefined,
"selected": undefined,
}
Expand All @@ -144,29 +144,60 @@ exports[`UseBiometry Screen Renders correctly when biometry available 1`] = `
onStartShouldSetResponder={[Function]}
testID="com.ariesbifold:id/ToggleBiometrics"
>
<RCTSwitch
accessibilityRole="switch"
disabled={false}
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTintColor="rgba(53, 130, 63, 0.35)"
<View
collapsable={false}
style={
Array [
Object {
"height": 31,
"width": 51,
},
Object {
"backgroundColor": "#D3D3D3",
"borderRadius": 16,
},
]
Object {
"backgroundColor": "rgba(211, 211, 211, 1)",
"borderRadius": 25,
"height": 30,
"justifyContent": "center",
"padding": 3,
"width": 55,
}
}
thumbTintColor="#606060"
tintColor="#D3D3D3"
value={false}
/>
>
<View
collapsable={false}
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFFFF",
"borderRadius": 20,
"height": 25,
"justifyContent": "center",
"transform": Array [
Object {
"translateX": 2,
},
],
"width": 25,
}
}
>
<Text
allowFontScaling={false}
selectable={false}
style={
Array [
Object {
"color": "#606060",
"fontSize": 15,
},
undefined,
Object {
"fontFamily": "Material Icons",
"fontStyle": "normal",
"fontWeight": "normal",
},
Object {},
]
}
>
</Text>
</View>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -368,7 +399,7 @@ exports[`UseBiometry Screen Renders correctly when biometry not available 1`] =
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"disabled": true,
"expanded": undefined,
"selected": undefined,
}
Expand All @@ -395,29 +426,60 @@ exports[`UseBiometry Screen Renders correctly when biometry not available 1`] =
onStartShouldSetResponder={[Function]}
testID="com.ariesbifold:id/ToggleBiometrics"
>
<RCTSwitch
accessibilityRole="switch"
disabled={true}
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTintColor="rgba(53, 130, 63, 0.35)"
<View
collapsable={false}
style={
Array [
Object {
"height": 31,
"width": 51,
},
Object {
"backgroundColor": "#D3D3D3",
"borderRadius": 16,
},
]
Object {
"backgroundColor": "rgba(211, 211, 211, 1)",
"borderRadius": 25,
"height": 30,
"justifyContent": "center",
"padding": 3,
"width": 55,
}
}
thumbTintColor="#606060"
tintColor="#D3D3D3"
value={false}
/>
>
<View
collapsable={false}
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFFFF",
"borderRadius": 20,
"height": 25,
"justifyContent": "center",
"transform": Array [
Object {
"translateX": 2,
},
],
"width": 25,
}
}
>
<Text
allowFontScaling={false}
selectable={false}
style={
Array [
Object {
"color": "#606060",
"fontSize": 15,
},
undefined,
Object {
"fontFamily": "Material Icons",
"fontStyle": "normal",
"fontWeight": "normal",
},
Object {},
]
}
>
</Text>
</View>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -631,7 +693,7 @@ exports[`UseBiometry Screen Toggles use biometrics ok 1`] = `
Object {
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"disabled": false,
"expanded": undefined,
"selected": undefined,
}
Expand All @@ -658,29 +720,60 @@ exports[`UseBiometry Screen Toggles use biometrics ok 1`] = `
onStartShouldSetResponder={[Function]}
testID="com.ariesbifold:id/ToggleBiometrics"
>
<RCTSwitch
accessibilityRole="switch"
disabled={false}
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTintColor="rgba(53, 130, 63, 0.35)"
<View
collapsable={false}
style={
Array [
Object {
"height": 31,
"width": 51,
},
Object {
"backgroundColor": "#D3D3D3",
"borderRadius": 16,
},
]
Object {
"backgroundColor": "rgba(211, 211, 211, 1)",
"borderRadius": 25,
"height": 30,
"justifyContent": "center",
"padding": 3,
"width": 55,
}
}
thumbTintColor="#606060"
tintColor="#D3D3D3"
value={false}
/>
>
<View
collapsable={false}
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFFFF",
"borderRadius": 20,
"height": 25,
"justifyContent": "center",
"transform": Array [
Object {
"translateX": 2,
},
],
"width": 25,
}
}
>
<Text
allowFontScaling={false}
selectable={false}
style={
Array [
Object {
"color": "#606060",
"fontSize": 15,
},
undefined,
Object {
"fontFamily": "Material Icons",
"fontStyle": "normal",
"fontWeight": "normal",
},
Object {},
]
}
>
</Text>
</View>
</View>
</View>
</View>
</View>
Expand Down
Loading