diff --git a/suite-native/module-send/src/components/AmountInputs.tsx b/suite-native/module-send/src/components/AmountInputs.tsx index 477853c50f7..af20263f6b6 100644 --- 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(null); const cryptoScale = useSharedValue(SCALE_FOCUSED); @@ -89,6 +91,12 @@ export const AmountInputs = ({ index, accountKey }: AmountInputProps) => { setIsCryptoSelected(!isCryptoSelected); }; + const handleInputFocus = (e: NativeSyntheticEvent) => { + 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 index ad9190391c7..d21228d2565 100644 --- 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={ diff --git a/suite-native/module-send/src/components/FiatAmountInput.tsx b/suite-native/module-send/src/components/FiatAmountInput.tsx index f4a31124258..b84cea01924 100644 --- 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={ diff --git a/suite-native/module-send/src/types.ts b/suite-native/module-send/src/types.ts index 1df4e4d009a..09a1259912c 100644 --- 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; translateValue: SharedValue; isDisabled?: boolean; + onFocus?: TextInputProps['onFocus']; };