ui: autoscroll when input onFocus

ambrosus · Dec 20, 2024 · c6192b4 · c6192b4
1 parent 4ad1add
commit c6192b4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 20 deletions.
diff --git a/src/features/harbor/components/tabs/withdraw-reward-only-tab/styles.ts b/src/features/harbor/components/tabs/withdraw-reward-only-tab/styles.ts
@@ -7,5 +7,5 @@ export const styles = StyleSheet.create({
     height: '100%',
     justifyContent: 'space-between'
   },
-  buttonWrapper: { paddingBottom: scale(20) }
+  buttonWrapper: { paddingBottom: scale(50) }
 });
diff --git a/src/features/harbor/components/tabs/withdraw-stake-reward-tab/styles.ts b/src/features/harbor/components/tabs/withdraw-stake-reward-tab/styles.ts
@@ -3,9 +3,9 @@ import { scale } from '@utils';
 
 export const styles = StyleSheet.create({
   main: {
-    height: '100%',
     paddingHorizontal: scale(12),
+    height: '100%',
     justifyContent: 'space-between'
   },
-  buttonWrapper: { paddingBottom: scale(20) }
+  buttonWrapper: { paddingBottom: scale(50) }
 });
diff --git a/src/screens/Harbor/ProcessStake/ProcessStake.tsx b/src/screens/Harbor/ProcessStake/ProcessStake.tsx
@@ -33,8 +33,8 @@ import { HarborTitle, RateInfo, StakedBalanceInfo } from './components';
 import { styles } from './styles';
 
 export const ProcessStake = () => {
-  const { top } = useSafeAreaInsets();
-  const extraHeight = isSmallScreen ? scale(100) : 0;
+  const { top, bottom } = useSafeAreaInsets();
+  const extraHeight = isSmallScreen ? 500 / (DEVICE_HEIGHT / 100) : 0;
   const scrollRef = useRef<ScrollView>(null);
   const bottomSheetRef = useRef<BottomSheetRef>(null);
   const { t } = useTranslation();
@@ -173,9 +173,9 @@ export const ProcessStake = () => {
       >
         <View
           style={{
-            ...styles.container,
-            height: DEVICE_HEIGHT - top - scale(56) + extraHeight,
-            paddingBottom: scale(16) + extraHeight
+            marginBottom: extraHeight,
+            height: DEVICE_HEIGHT - top - bottom,
+            ...styles.wrapper
           }}
         >
           <View>

diff --git a/src/screens/Harbor/ProcessStake/styles.tsx b/src/screens/Harbor/ProcessStake/styles.tsx
@@ -2,15 +2,15 @@ import { StyleSheet } from 'react-native';
 import { scale } from '@utils';
 
 export const styles = StyleSheet.create({
-  main: {
-    height: '100%',
-    paddingHorizontal: scale(12)
+  main: { height: '100%' },
+  wrapper: {
+    paddingHorizontal: scale(12),
+    justifyContent: 'space-between'
   },
   stakeInfoText: {
     paddingHorizontal: scale(2),
     paddingTop: scale(8),
     paddingBottom: scale(16)
   },
-  buttonWrapper: { paddingBottom: scale(20) },
-  container: { justifyContent: 'space-between' }
+  buttonWrapper: { paddingBottom: scale(55) }
 });
diff --git a/src/screens/Harbor/WithdrawHarborScreen/WithdrawHarborScreen.tsx b/src/screens/Harbor/WithdrawHarborScreen/WithdrawHarborScreen.tsx
@@ -12,11 +12,13 @@ import { useHarborStore } from '@entities/harbor/model/harbor-store';
 import { useWalletStore } from '@entities/wallet';
 import { HarborWithdrawTabs } from '@features/harbor/components/tabs';
 import { useEffectOnce, useKeyboardHeight } from '@hooks';
-import { isSmallScreen, scale } from '@utils';
+import { isSmallScreen } from '@utils';
 import { styles } from './styles';
 
 export const WithdrawHarborScreen = () => {
   const { t } = useTranslation();
+  const { top, bottom } = useSafeAreaInsets();
+  const extraHeight = isSmallScreen ? 500 / (DEVICE_HEIGHT / 100) : 0;
   const scrollRef = useRef<ScrollView>(null);
 
   const navigation = useNavigation<HarborNavigationProp>();
@@ -43,7 +45,6 @@ export const WithdrawHarborScreen = () => {
   const refetchAll = async () => {
     updateAll(wallet?.address || '');
   };
-  const extraHeight = isSmallScreen ? scale(100) : 0;
   const keyboardHeight = useKeyboardHeight();
 
   useEffect(() => {
@@ -54,8 +55,6 @@ export const WithdrawHarborScreen = () => {
     }
   }, [extraHeight, keyboardHeight]);
 
-  const { top } = useSafeAreaInsets();
-
   return (
     <View style={{ paddingTop: top }}>
       <Header
@@ -77,9 +76,8 @@ export const WithdrawHarborScreen = () => {
       >
         <View
           style={{
-            ...styles.container,
-            height: DEVICE_HEIGHT - top - scale(56) + extraHeight,
-            paddingBottom: scale(16) + extraHeight
+            marginBottom: extraHeight,
+            height: DEVICE_HEIGHT - top - bottom
           }}
         >
           <HarborWithdrawTabs />