fix(flick): fix flick with useLayoutEffect

AppAndFlow · Jun 28, 2024 · 66102ab · 66102ab
1 parent 3606633
commit 66102ab
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/Provider.tsx b/src/Provider.tsx
@@ -1,6 +1,6 @@
 import React, {
   useCallback,
-  useEffect,
+  useLayoutEffect,
   useMemo,
   useState,
   type PropsWithChildren,
@@ -136,9 +136,10 @@ export function useFormSmartScroll({
 
   const currentFocus = useAtomValue(currentFocusAtom);
 
-  useEffect(() => {
+  // we have a flick on first focus so we make the scrollview wait a bit before animate
+  useLayoutEffect(() => {
     if (currentFocus && !isReady) {
-      setTimeout(() => setIsReady(true), 100);
+      setTimeout(() => setIsReady(true), isAndroid ? 250 : 100);
     }
   }, [currentFocus]);