fix(ready): fix issue where the isReady wasn't set at first

Author: EQuimper

package.json

@@ -161,8 +161,5 @@
         }
       ]
     ]
-  },
-  "dependencies": {
-    "jotai": "^2.12.2"
   }
 }

src/Provider.tsx

@@ -27,35 +27,38 @@ import {
   StyleSheet,
   useWindowDimensions,
 } from 'react-native';
-import {
-  Provider as JotaiProvider,
-  useAtom,
-  useAtomValue,
-  useSetAtom,
-} from 'jotai/react';
-import { selectAtom } from 'jotai/utils';
 import { Platform } from 'react-native';
 
-import { elementsAtom, inputsAtom, wrapperOffsetAtom } from './state';
 import { useKeyboard } from './useKeyboard';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+export type RefType = TextInput | View | Animated.View | null;
+
+export type Elements = Record<
+  string,
+  {
+    isFocus: boolean;
+    position: number;
+    height: number;
+    name: string;
+  }
+>;
+
+export type InputType = Record<string, RefObject<TextInput>>;
+
 const isAndroid = Platform.OS === 'android';
 
 function Wrapper(props: PropsWithChildren<{}>) {
-  const setWrapperOffsetAtom = useSetAtom(wrapperOffsetAtom);
   const windowDimensions = useWindowDimensions();
-  const { wrapperRef } = useSmartScrollContext();
+  const { wrapperRef, setWrapperOffset } = useSmartScrollContext();
 
   return (
     <View
       style={styles.wrapper}
       ref={wrapperRef}
       onLayout={({ nativeEvent }) => {
         if (nativeEvent.layout.height < windowDimensions.height) {
-          setWrapperOffsetAtom(
-            windowDimensions.height - nativeEvent.layout.height
-          );
+          setWrapperOffset(windowDimensions.height - nativeEvent.layout.height);
         }
       }}
     >
@@ -72,11 +75,9 @@ const styles = StyleSheet.create({
 
 export default function SmartScrollView(props: PropsWithChildren<{}>) {
   return (
-    <JotaiProvider>
-      <SmartScrollProvider>
-        <Wrapper {...props} />
-      </SmartScrollProvider>
-    </JotaiProvider>
+    <SmartScrollProvider>
+      <Wrapper {...props} />
+    </SmartScrollProvider>
   );
 }
 
@@ -85,14 +86,31 @@ const SmartScrollContext = React.createContext<{
   scrollY: SharedValue<number>;
   isReady: boolean;
   wrapperRef: RefObject<View>;
+  wrapperOffset: number;
+  setWrapperOffset: React.Dispatch<React.SetStateAction<number>>;
+  elements: Elements;
+  setElements: React.Dispatch<React.SetStateAction<Elements>>;
+  inputs: InputType;
+  setInputs: React.Dispatch<React.SetStateAction<InputType>>;
+  currentFocus?: null | Elements[0];
 } | null>(null);
 
 const SmartScrollProvider = ({ children }: { children: React.ReactNode }) => {
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
   const scrollY = useSharedValue(0);
   const wrapperRef = React.useRef<View>(null);
-  const [isReady, setIsReady] = useState(false);
-  const currentFocus = useAtomValue(currentFocusAtom);
+  const [isReady, setIsReady] = useState(true);
+  const [elements, setElements] = useState<Elements>({});
+  const [wrapperOffset, setWrapperOffset] = useState(0);
+  const [inputs, setInputs] = useState<InputType>({});
+
+  const currentFocus = useMemo(
+    () =>
+      Object.keys(elements)
+        .map((key) => elements[key])
+        .find((el) => el?.isFocus),
+    [elements]
+  );
 
   // we have a flick on first focus so we make the scrollview wait a bit before animate
   useLayoutEffect(() => {
@@ -103,7 +121,19 @@ const SmartScrollProvider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <SmartScrollContext.Provider
-      value={{ scrollRef, scrollY, isReady, wrapperRef }}
+      value={{
+        scrollRef,
+        scrollY,
+        isReady,
+        wrapperRef,
+        wrapperOffset,
+        setWrapperOffset,
+        elements,
+        setElements,
+        currentFocus,
+        inputs,
+        setInputs,
+      }}
     >
       {children}
     </SmartScrollContext.Provider>
@@ -114,7 +144,9 @@ export const useSmartScrollContext = () => {
   const context = React.useContext(SmartScrollContext);
 
   if (!context) {
-    throw new Error('Plz wrap with SmartScrollProvider');
+    throw new Error(
+      'Component must be wrapped in a SmartScrollProvider. Please ensure the provider is included.'
+    );
   }
 
   return context;
@@ -154,29 +186,25 @@ export const ScrollView = (
   );
 };
 
-const currentFocusAtom = selectAtom(elementsAtom, (val) =>
-  Object.keys(val)
-    .map((key) => val[key])
-    .find((el) => el?.isFocus)
-);
-
 export function useFormSmartScroll({
   padding = 0,
 }: {
   padding?: number;
 } = {}) {
   const insets = useSafeAreaInsets();
-  const wrapperOffset = useAtomValue(wrapperOffsetAtom);
-
-  const { isReady, scrollY, scrollRef } = useSmartScrollContext();
+  const {
+    currentFocus,
+    setElements,
+    isReady,
+    scrollY,
+    scrollRef,
+    wrapperOffset,
+    inputs,
+    setInputs,
+  } = useSmartScrollContext();
 
   const _keyboard = useKeyboard();
 
-  const setState = useSetAtom(elementsAtom);
-  const [inputs, setInputs] = useAtom(inputsAtom);
-
-  const currentFocus = useAtomValue(currentFocusAtom);
-
   const scrollHandler = useAnimatedScrollHandler((event) => {
     scrollY.value = event.contentOffset.y;
   });
@@ -247,6 +275,8 @@ export function useFormSmartScroll({
     }
   );
 
+  console.log({ isReady });
+
   const translateStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: isReady ? translateY.value : 0 }],
@@ -278,7 +308,7 @@ export function useFormSmartScroll({
 
   const onFocus = useCallback(
     (name: string) => () => {
-      setState((s) => ({
+      setElements((s) => ({
         ...s,
         [name]: {
           height: 0,
@@ -289,12 +319,12 @@ export function useFormSmartScroll({
         },
       }));
     },
-    [setState]
+    [setElements]
   );
 
   const onBlur = useCallback(
     (name: string) => () => {
-      setState((s) => ({
+      setElements((s) => ({
         ...s,
         [name]: {
           height: 0,
@@ -305,7 +335,7 @@ export function useFormSmartScroll({
         },
       }));
     },
-    [setState]
+    [setElements]
   );
 
   /**

src/ViewWrapper.tsx

@@ -2,8 +2,6 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback, useRef } from 'react';
 import { View } from 'react-native';
 import type { LayoutChangeEvent, ViewStyle } from 'react-native';
-import { useAtom } from 'jotai';
-import { elementsAtom } from './state';
 import { useSmartScrollContext } from './Provider';
 
 type Props = PropsWithChildren<{
@@ -12,17 +10,16 @@ type Props = PropsWithChildren<{
 }>;
 
 const ViewWrapper = ({ name, style, children }: Props) => {
-  const [state, setState] = useAtom(elementsAtom);
-  const { wrapperRef } = useSmartScrollContext();
+  const { wrapperRef, elements, setElements } = useSmartScrollContext();
 
   const ref = useRef<View>(null);
 
   const onLayout = useCallback(
     ({ nativeEvent }: LayoutChangeEvent) => {
-      const element = state[name];
-      if (wrapperRef.current && !state[name]) {
+      const element = elements[name];
+      if (wrapperRef.current && !elements[name]) {
         ref.current?.measureLayout(wrapperRef.current, (_, y, _w, h) => {
-          setState((s) => ({
+          setElements((s) => ({
             ...s,
             [name]: {
               ...s[name],
@@ -34,16 +31,16 @@ const ViewWrapper = ({ name, style, children }: Props) => {
           }));
         });
       } else if (element) {
-        setState({
-          ...state,
+        setElements((s) => ({
+          ...s,
           [name]: {
             ...element,
             height: nativeEvent.layout.height,
           },
-        });
+        }));
       }
     },
-    [state, name, wrapperRef]
+    [name, wrapperRef, elements]
   );
 
   return (

src/state.ts

@@ -1,11 +1,6 @@
 import React from 'react';
 import SmartScrollView from './Provider';
-import { Provider } from 'jotai';
 
 export const withSmartScroll = (child: (props?: any) => React.ReactElement) => {
-  return (props?: any) => (
-    <Provider>
-      <SmartScrollView>{child(props)}</SmartScrollView>
-    </Provider>
-  );
+  return (props?: any) => <SmartScrollView>{child(props)}</SmartScrollView>;
 };

src/withSmartScroll.tsx

@@ -76,7 +76,6 @@ __metadata:
     eslint-config-prettier: ^9.0.0
     eslint-plugin-prettier: ^5.0.1
     jest: ^29.7.0
-    jotai: ^2.12.2
     prettier: ^3.0.3
     react: 18.3.1
     react-native: 0.76.7
@@ -11417,21 +11416,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jotai@npm:^2.12.2":
-  version: 2.12.2
-  resolution: "jotai@npm:2.12.2"
-  peerDependencies:
-    "@types/react": ">=17.0.0"
-    react: ">=17.0.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    react:
-      optional: true
-  checksum: 8af476c442a09be12fa5b09e2d20e47905575123a98ccb16981ee5f280af1da23a23095ee4f33fde799aed568ecee8971a39f9ed29f9ec4687f2e54180b97191
-  languageName: node
-  linkType: hard
-
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"