From f8a2c6da937db84760ca4434f3d2ad26e8fe866d Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 12 Apr 2024 12:37:16 +0800
Subject: [PATCH 1/2] scroll in useLayoutEffect to avoid any flicker

---
 src/pages/settings/InitialSettingsPage.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index a307f6cf6a7f..f869eb91a9fa 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -1,5 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent, ScrollView as RNScrollView, ScrollViewProps, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
@@ -461,18 +461,13 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa
         [route, saveScrollOffset],
     );
 
-    const [isAfterOnLayout, setIsAfterOnLayout] = useState(false);
-
-    const onLayout = useCallback(() => {
+    useLayoutEffect(() => {
         const scrollOffset = getScrollOffset(route);
-        setIsAfterOnLayout(true);
         if (!scrollOffset || !scrollViewRef.current) {
             return;
         }
         scrollViewRef.current.scrollTo({y: scrollOffset, animated: false});
-    }, [getScrollOffset, route]);
-
-    const scrollOffset = getScrollOffset(route);
+    }, []);
 
     return (
         <ScreenWrapper
@@ -483,11 +478,8 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa
         >
             <ScrollView
                 ref={scrollViewRef}
-                onLayout={onLayout}
                 onScroll={onScroll}
                 scrollEventThrottle={16}
-                // We use marginTop to prevent glitching on the initial frame that renders before scrollTo.
-                contentContainerStyle={[!isAfterOnLayout && !!scrollOffset && {marginTop: -scrollOffset}]}
                 style={[styles.w100, styles.pt4]}
             >
                 {headerContent}

From 769065dd9dba70abdf5f08ee0c85625e81b6f47e Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 12 Apr 2024 13:28:22 +0800
Subject: [PATCH 2/2] lint

---
 src/pages/settings/InitialSettingsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index f869eb91a9fa..6e1809c26c63 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -467,7 +467,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa
             return;
         }
         scrollViewRef.current.scrollTo({y: scrollOffset, animated: false});
-    }, []);
+    }, [getScrollOffset, route]);
 
     return (
         <ScreenWrapper