fix(flick): fix issue where flick on first render

Author: EQuimper

README.md

@@ -10,6 +10,20 @@ yarn install @appandflow/rn-magic-scroll
 npm i @appandflow/rn-magic-scroll
 ```
 
+### Android
+
+On Android, make sure to set `android:windowSoftInputMode` in your `AndroidManifest.xml` to **pan**
+
+##### Expo
+
+```json
+// app.json
+"android": {
+  ...rest,
+  "softwareKeyboardLayoutMode": "pan"
+}
+```
+
 ## Basic Usage
 
 Wrap your form/screen within our ScrollView. Utilizing context requires it to be one level higher for enhanced control over your inputs. Alternatively, you can employ the Higher Order Component (HOC) for this purpose.

example/app.json

@@ -21,7 +21,8 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "softwareKeyboardLayoutMode": "pan"
     },
     "web": {
       "favicon": "./assets/favicon.png"

example/src/third-party/gorhom-bottom-sheet/index.tsx

@@ -19,10 +19,8 @@ const Form = () => {
         contentContainerStyle: {
           paddingHorizontal: 16,
           paddingBottom: insets.bottom + 20,
-          backgroundColor: 'red',
           paddingTop: 100,
         },
-        style: { backgroundColor: 'blue' },
       }}
     >
       <MagicScroll.TextInput

src/Provider.tsx

@@ -7,7 +7,6 @@ import React, {
 import Animated, {
   scrollTo,
   useAnimatedRef,
-  useAnimatedScrollHandler,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -83,12 +82,12 @@ export function ScrollView(
     additionalPadding?: number;
   }>
 ) {
-  const { scrollHandler, scrollRef, baseScrollViewProps, translateStyle } =
-    useFormSmartScroll({ padding: props?.additionalPadding });
+  const { scrollRef, baseScrollViewProps, translateStyle } = useFormSmartScroll(
+    { padding: props?.additionalPadding }
+  );
 
   return (
     <Animated.ScrollView
-      onScroll={scrollHandler}
       ref={scrollRef}
       {...baseScrollViewProps}
       {...props.scollViewProps}
@@ -115,12 +114,6 @@ export function useFormSmartScroll({
 
   const _keyboard = useKeyboard();
 
-  const scrollHandler = useAnimatedScrollHandler({
-    onScroll: (event) => {
-      scrollY.value = event.contentOffset.y;
-    },
-  });
-
   const setState = useSetAtom(elementsAtom);
   const [inputs, setInputs] = useAtom(inputsAtom);
 
@@ -189,7 +182,7 @@ export function useFormSmartScroll({
   );
 
   useDerivedValue(() => {
-    scrollTo(scrollRef, 0, scrollY.value, true);
+    scrollTo(scrollRef, 0, scrollY.value, false);
   });
 
   const onFocus = useCallback(
@@ -265,7 +258,6 @@ export function useFormSmartScroll({
     registerInput,
     chainInput,
     translateStyle,
-    scrollHandler,
     scrollRef,
     baseScrollViewProps,
     baseTextInputProps,