SimpleTransferFragment performance optimisation

app/Navigation.tsx

@@ -7,7 +7,7 @@ import { WalletCreateFragment } from './fragments/onboarding/WalletCreateFragmen
 import { LegalFragment } from './fragments/onboarding/LegalFragment';
 import { WalletBackupFragment } from './fragments/secure/WalletBackupFragment';
 import { HomeFragment } from './fragments/HomeFragment';
-import { SimpleTransferFragment } from './fragments/secure/SimpleTransferFragment';
+import { SimpleTransferFragment } from './fragments/secure/simpleTransfer';
 import { ScannerFragment } from './fragments/utils/ScannerFragment';
 import { MigrationFragment } from './fragments/secure/MigrationFragment';
 import { ReceiveFragment } from './fragments/wallet/ReceiveFragment';

app/components/ATextInput.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { KeyboardTypeOptions, ReturnKeyTypeOptions, StyleProp, View, ViewStyle, Text, TextStyle, Pressable, TouchableWithoutFeedback, Platform, InputModeOptions } from 'react-native';
+import { KeyboardTypeOptions, ReturnKeyTypeOptions, StyleProp, View, ViewStyle, Text, TextStyle, Pressable, TouchableWithoutFeedback, Platform, InputModeOptions, LayoutChangeEvent, GestureResponderEvent } from 'react-native';
 import { TextInput } from 'react-native-gesture-handler';
 import Animated, { Easing, FadeIn, FadeInUp, FadeOutDown, LinearTransition, cancelAnimation, interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { ForwardedRef, RefObject, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTheme } from '../engine/hooks';
-import { useDimensions } from '@react-native-community/hooks';
 import { Typography } from './styles';
 
 import Clear from '@assets/ic-clear.svg';
@@ -123,12 +122,12 @@ export interface ATextInputProps {
     screenWidth?: number,
     inputMode?: InputModeOptions,
     cursorColor?: string,
+    maxHeight?: number
+    onStartShouldSetResponder?: (event: GestureResponderEvent) => boolean
 }
 
 export const ATextInput = memo(forwardRef((props: ATextInputProps, ref: ForwardedRef<ATextInputRef>) => {
     const theme = useTheme();
-    const dimentions = useDimensions();
-    const screenWidth = props.screenWidth ?? dimentions.screen.width;
 
     const [focused, setFocused] = useState(false);
 
@@ -171,17 +170,26 @@ export const ATextInput = memo(forwardRef((props: ATextInputProps, ref: Forwarde
     const valueNotEmptyShared = useSharedValue(0);
     const labelHeightCoeff = useSharedValue(1);
 
+    const labelHeight = useSharedValue(0);
+    const labelWidth = useSharedValue(1);
+
     const withLabel = !!props.label;
     const valueNotEmpty = (props.value?.length || 0) > 0;
-
-    const xTranslate = Math.round(screenWidth * 0.1) + 2;
+
+    const handleLayout = (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        labelHeight.value = height
+        labelWidth.value = width
+      };
 
     const labelAnimStyle = useAnimatedStyle(() => {
         return {
             transform: [
+                { translateX: interpolate(valueNotEmptyShared.value, [0, 1], [0, -labelWidth.value / 2]) },
+                { translateY: interpolate(valueNotEmptyShared.value, [0, 1], [0, -labelHeight.value * 2]) },
                 { scale: interpolate(valueNotEmptyShared.value, [0, 1], [1, 0.8]) },
-                { translateX: interpolate(valueNotEmptyShared.value, [0, 1], [0, -xTranslate]) },
-                { translateY: interpolate(valueNotEmptyShared.value, [0, 1], [2, -13]) },
+                { translateX: interpolate(valueNotEmptyShared.value, [0, 1], [0, labelWidth.value / 2 ]) },
+                { translateY: interpolate(valueNotEmptyShared.value, [0, 1], [0, labelHeight.value * 2]) },
             ],
             opacity: interpolate(valueNotEmptyShared.value, [0, 0.5, 1], [1, 0.1, 1]),
         }
@@ -228,7 +236,7 @@ export const ATextInput = memo(forwardRef((props: ATextInputProps, ref: Forwarde
                             { position: 'absolute', top: 0, right: 0, left: 0, paddingHorizontal: 16 },
                             props.labelStyle
                         ]}>
-                            <Animated.View style={labelAnimStyle}>
+                            <Animated.View onLayout={handleLayout} style={labelAnimStyle}>
                                 <Text
                                     numberOfLines={1}
                                     onTextLayout={(e) => {
@@ -258,7 +266,7 @@ export const ATextInput = memo(forwardRef((props: ATextInputProps, ref: Forwarde
                             >
                                 <TextInput
                                     ref={tref}
-                                    hitSlop={16}
+                                    hitSlop={16}                         
                                     style={[
                                         {
                                             color: theme.textPrimary,
@@ -303,6 +311,7 @@ export const ATextInput = memo(forwardRef((props: ATextInputProps, ref: Forwarde
                                     onSubmitEditing={onSubmit}
                                     maxLength={props.maxLength}
                                     inputMode={props.inputMode}
+                                    onStartShouldSetResponder={props.onStartShouldSetResponder}
                                 />
                                 {props.inputSuffix && (
                                     <Text

app/components/address/AddressDomainInput.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardedRef, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react"
-import { Alert, Pressable, Image, TextInput, View, Text, } from "react-native"
+import { Alert, Pressable, Image, TextInput, View, Text, LayoutChangeEvent } from "react-native"
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated"
 import { BarCodeScanner } from 'expo-barcode-scanner';
 import { Address } from "@ton/core";
@@ -339,16 +339,28 @@ export const AddressDomainInput = memo(forwardRef(({
 
     const valueNotEmptyShared = useSharedValue(0);
     const labelHeightCoeff = useSharedValue(1);
+
+    const labelHeight = useSharedValue(0);
+    const labelWidth = useSharedValue(1);
+
     const valueNotEmpty = (textInput?.length || 0) > 0;
     const screenWidthValue = screenWidth ?? 0;
     const xTranslate = Math.round(screenWidthValue * 0.1) + Math.round(screenWidthValue / 2 * 0.018);
 
+    const handleLayout = (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        labelHeight.value = height
+        labelWidth.value = width
+      };
+
     const labelAnimStyle = useAnimatedStyle(() => {
         return {
             transform: [
+                { translateX: interpolate(valueNotEmptyShared.value, [0, 1], [0, -labelWidth.value / 2]) },
+                { translateY: interpolate(valueNotEmptyShared.value, [0, 1], [0, -labelHeight.value * 2]) },
                 { scale: interpolate(valueNotEmptyShared.value, [0, 1], [1, 0.8]) },
-                { translateX: interpolate(valueNotEmptyShared.value, [0, 1], [0, -xTranslate]) },
-                { translateY: interpolate(valueNotEmptyShared.value, [0, 1], [2, -13]) },
+                { translateX: interpolate(valueNotEmptyShared.value, [0, 1], [0, labelWidth.value / 2 ]) },
+                { translateY: interpolate(valueNotEmptyShared.value, [0, 1], [0, labelHeight.value * 2]) },
             ],
             opacity: interpolate(valueNotEmptyShared.value, [0, 0.2, 1], [1, 0.1, 1]),
         }
@@ -418,7 +430,7 @@ export const AddressDomainInput = memo(forwardRef(({
                 position: 'absolute', top: 0, right: 0, left: 0,
                 paddingHorizontal: 16, marginLeft: -16
             }}>
-                <Animated.View style={[labelAnimStyle, { maxWidth: '85%' }]}>
+                <Animated.View onLayout={handleLayout} style={[labelAnimStyle, { maxWidth: '85%' }]}>
                     <Text
                         numberOfLines={1}
                         onTextLayout={(e) => {

app/engine/hooks/theme/useNavigationTheme.ts

@@ -12,7 +12,7 @@ export function useNavigationTheme(): NavigationThemeType {
     const [themeStyle,] = useThemeStyle();
 
     useEffect(() => {
-        if (themeStyle !== ThemeStyle.System && Platform.OS === 'android') {
+        if (Platform.OS === 'android') {
             SystemUI.setBackgroundColorAsync(theme.backgroundPrimary);
         } else {
             SystemUI.setBackgroundColorAsync(null);