refactor(wallet-mobile): display native kb for device pin

apps/wallet-mobile/src/features/Auth/CreatePinInput/CreatePinInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 
 import {showErrorDialog} from '../../../kernel/dialogs'
@@ -25,6 +25,16 @@ export const CreatePinInput = ({onDone}: Props) => {
   const [pin, setPin] = React.useState('')
   const [step, setStep] = React.useState<'pin' | 'pinConfirmation'>('pin')
 
+  useEffect(() => {
+    if (step === 'pin') {
+      pinInputRef.current?.clear()
+      pinInputRef.current?.focus()
+    } else if (step === 'pinConfirmation') {
+      pinConfirmationInputRef.current?.clear()
+      pinConfirmationInputRef.current?.focus()
+    }
+  }, [step])
+
   const onPinInput = (pin: string) => {
     setPin(pin)
     setStep('pinConfirmation')

apps/wallet-mobile/src/features/Auth/PinInput/PinInput.tsx

@@ -1,9 +1,9 @@
 import {useTheme} from '@yoroi/theme'
 import _ from 'lodash'
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import React, {useEffect, useRef} from 'react'
+import {StyleSheet, TextInput, View} from 'react-native'
+import {InteractionManager} from 'react-native'
 
-import {BACKSPACE, NumericKeyboard} from '../../../components/NumericKeyboard'
 import {Spacer} from '../../../components/Spacer/Spacer'
 import {Text} from '../../../components/Text'
 
@@ -18,35 +18,52 @@ type Props = {
 
 export type PinInputRef = {
   clear: () => void
+  focus: () => void
 }
 
 export const PinInput = React.forwardRef<PinInputRef, Props>((props, ref) => {
-  const {enabled = true, pinMaxLength, title, subtitles = [], onDone, onGoBack} = props
+  const {enabled = true, pinMaxLength, title, subtitles = [], onDone} = props
   const styles = useStyles()
 
   const [pin, setPin] = React.useState('')
+  const inputRef = useRef<TextInput>(null)
+  const {isDark} = useTheme()
+
+  useEffect(() => {
+    if (enabled) {
+      const interaction = InteractionManager.runAfterInteractions(() => {
+        const timer = setTimeout(() => {
+          inputRef.current?.focus()
+        }, 300)
+        return () => clearTimeout(timer)
+      })
+      return () => interaction.cancel()
+    }
+  }, [enabled])
 
   React.useImperativeHandle(ref, () => ({
     clear: () => {
       setPin('')
+      inputRef.current?.clear()
+      inputRef.current?.focus()
+    },
+    focus: () => {
+      inputRef.current?.focus()
     },
   }))
 
-  const onKeyDown = (value: string) => {
+  const handleTextChange = (value: string) => {
     if (!enabled) return
-    if (value === BACKSPACE) {
-      if (pin.length === 0) onGoBack?.()
-      setPin(pin.substring(0, pin.length - 1))
-      return
-    }
 
-    if (pin.length === pinMaxLength) {
-      return
+    if (value.length > pinMaxLength) {
+      value = value.substring(0, pinMaxLength)
     }
 
-    const newPin = pin.concat(value)
-    setPin(newPin)
-    if (newPin.length === pinMaxLength) onDone(newPin)
+    setPin(value)
+
+    if (value.length === pinMaxLength) {
+      onDone(value)
+    }
   }
 
   return (
@@ -71,7 +88,18 @@ export const PinInput = React.forwardRef<PinInputRef, Props>((props, ref) => {
         </View>
       </View>
 
-      <NumericKeyboard onKeyDown={onKeyDown} />
+      <TextInput
+        ref={inputRef}
+        style={styles.hiddenInput}
+        keyboardType="numeric"
+        value={pin}
+        onChangeText={handleTextChange}
+        maxLength={pinMaxLength}
+        autoFocus={true}
+        caretHidden={true}
+        importantForAccessibility="no"
+        keyboardAppearance={isDark ? 'dark' : 'light'}
+      />
     </View>
   )
 })
@@ -136,6 +164,12 @@ const useStyles = () => {
     pinCircleActive: {
       backgroundColor: color.primary_600,
     },
+    hiddenInput: {
+      position: 'absolute',
+      opacity: 0,
+      height: 0,
+      width: 0,
+    },
   })
   return styles
 }

apps/wallet-mobile/translations/messages/src/features/Auth/CreatePinInput/CreatePinInput.json

@@ -4,59 +4,59 @@
     "defaultMessage": "!!!Enter PIN",
     "file": "src/features/Auth/CreatePinInput/CreatePinInput.tsx",
     "start": {
-      "line": 78,
+      "line": 88,
       "column": 17,
-      "index": 2443
+      "index": 2731
     },
     "end": {
-      "line": 81,
+      "line": 91,
       "column": 3,
-      "index": 2551
+      "index": 2839
     }
   },
   {
     "id": "components.initialization.custompinscreen.pinInputSubtitle",
     "defaultMessage": "!!!Choose a new PIN to quickly access your wallet",
     "file": "src/features/Auth/CreatePinInput/CreatePinInput.tsx",
     "start": {
-      "line": 82,
+      "line": 92,
       "column": 20,
-      "index": 2573
+      "index": 2861
     },
     "end": {
-      "line": 85,
+      "line": 95,
       "column": 3,
-      "index": 2721
+      "index": 3009
     }
   },
   {
     "id": "components.initialization.custompinscreen.pinConfirmationTitle",
     "defaultMessage": "!!!Repeat PIN",
     "file": "src/features/Auth/CreatePinInput/CreatePinInput.tsx",
     "start": {
-      "line": 86,
+      "line": 96,
       "column": 29,
-      "index": 2752
+      "index": 3040
     },
     "end": {
-      "line": 89,
+      "line": 99,
       "column": 3,
-      "index": 2868
+      "index": 3156
     }
   },
   {
     "id": "components.firstrun.custompinscreen.pinInputConfirmationSubTitle",
     "defaultMessage": "!!!Repeat a new PIN to quickly access your wallet",
     "file": "src/features/Auth/CreatePinInput/CreatePinInput.tsx",
     "start": {
-      "line": 90,
+      "line": 100,
       "column": 32,
-      "index": 2902
+      "index": 3190
     },
     "end": {
-      "line": 93,
+      "line": 103,
       "column": 3,
-      "index": 3056
+      "index": 3344
     }
   }
 ]