fix(suite-native): send form scroll so the whole amount input is visible

trezor · Oct 1, 2024 · 56abb30 · 56abb30
1 parent 8656b3c
commit 56abb30
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/suite-native/module-send/src/components/AmountInputs.tsx b/suite-native/module-send/src/components/AmountInputs.tsx
@@ -1,6 +1,6 @@
 import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useRef, useState } from 'react';
-import { TextInput } from 'react-native';
+import { NativeSyntheticEvent, TextInput, TextInputFocusEventData } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { VStack, HStack, Box, Text } from '@suite-native/atoms';
@@ -13,6 +13,7 @@ import {
 import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { analytics, EventType } from '@suite-native/analytics';
+import { useScrollView } from '@suite-native/navigation';
 
 import { CryptoAmountInput } from './CryptoAmountInput';
 import { FiatAmountInput } from './FiatAmountInput';
@@ -55,6 +56,7 @@ export const AmountInputs = ({ index, accountKey }: AmountInputProps) => {
     );
 
     const [isCryptoSelected, setIsCryptoSelected] = useState(true);
+    const scrollView = useScrollView();
 
     const cryptoRef = useRef<TextInput>(null);
     const cryptoScale = useSharedValue(SCALE_FOCUSED);
@@ -89,6 +91,12 @@ export const AmountInputs = ({ index, accountKey }: AmountInputProps) => {
         setIsCryptoSelected(!isCryptoSelected);
     };
 
+    const handleInputFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        e.target?.measureInWindow((_, y) => {
+            scrollView?.scrollTo({ x: 0, y, animated: true });
+        });
+    };
+
     if (!networkSymbol) return null;
 
     return (
@@ -110,6 +118,7 @@ export const AmountInputs = ({ index, accountKey }: AmountInputProps) => {
                     inputRef={cryptoRef}
                     isDisabled={!isCryptoSelected}
                     networkSymbol={networkSymbol}
+                    onFocus={handleInputFocus}
                 />
                 {isFiatDisplayed && (
                     <>
@@ -121,6 +130,7 @@ export const AmountInputs = ({ index, accountKey }: AmountInputProps) => {
                             inputRef={fiatRef}
                             isDisabled={isCryptoSelected}
                             networkSymbol={networkSymbol}
+                            onFocus={handleInputFocus}
                         />
                     </>
                 )}

diff --git a/suite-native/module-send/src/components/CryptoAmountInput.tsx b/suite-native/module-send/src/components/CryptoAmountInput.tsx
@@ -41,6 +41,7 @@ export const CryptoAmountInput = ({
     scaleValue,
     translateValue,
     networkSymbol,
+    onFocus,
     isDisabled = false,
 }: SendAmountInputProps) => {
     const { applyStyle } = useNativeStyles();
@@ -92,6 +93,7 @@ export const CryptoAmountInput = ({
                 editable={!isDisabled}
                 onChangeText={handleChangeValue}
                 onBlur={handleBlur}
+                onFocus={onFocus}
                 hasError={!isDisabled && hasError}
                 rightIcon={
                     <SendAmountCurrencyLabelWrapper isDisabled={isDisabled}>

diff --git a/suite-native/module-send/src/components/FiatAmountInput.tsx b/suite-native/module-send/src/components/FiatAmountInput.tsx
@@ -19,6 +19,7 @@ export const FiatAmountInput = ({
     translateValue,
     inputRef,
     networkSymbol,
+    onFocus,
     isDisabled = false,
 }: SendAmountInputProps) => {
     const { applyStyle } = useNativeStyles();
@@ -70,6 +71,7 @@ export const FiatAmountInput = ({
                 editable={!isDisabled}
                 onChangeText={handleChangeValue}
                 onBlur={onBlur}
+                onFocus={onFocus}
                 hasError={!isDisabled && hasError}
                 rightIcon={
                     <SendAmountCurrencyLabelWrapper isDisabled={isDisabled}>

diff --git a/suite-native/module-send/src/types.ts b/suite-native/module-send/src/types.ts
@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { TextInput } from 'react-native';
+import { TextInput, TextInputProps } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 
 import { FeeLevelLabel, ReviewOutput, ReviewOutputState } from '@suite-common/wallet-types';
@@ -17,4 +17,5 @@ export type SendAmountInputProps = {
     scaleValue: SharedValue<number>;
     translateValue: SharedValue<number>;
     isDisabled?: boolean;
+    onFocus?: TextInputProps['onFocus'];
 };