fix(ref): fix ref issues and make it optional

Author: EQuimper

src/TextInput.tsx

@@ -18,62 +18,64 @@ type Props = {
     }
   ) => React.ReactElement;
   chainTo?: string;
-  ref: React.RefObject<RNTextInput>;
+  ref?: React.RefObject<RNTextInput>;
 };
 
-export const TextInput = (props: Props) => {
-  const id = React.useId();
-  const name = React.useRef(props.name ?? id);
-  const textInputRef = React.useRef<RNTextInput>(null);
+export const TextInput = React.forwardRef<RNTextInput, Props>(
+  (props, inputRef) => {
+    const id = React.useId();
+    const name = React.useRef(props.name ?? id);
+    const textInputRef = React.useRef<RNTextInput>(null);
 
-  const ref = mergeRefs([textInputRef, props.ref]);
+    const ref = mergeRefs([textInputRef, inputRef]);
 
-  const { onBlur, onFocus, onSubmitEditing, ...textInputProps } =
-    props.textInputProps ?? {};
+    const { onBlur, onFocus, onSubmitEditing, ...textInputProps } =
+      props.textInputProps ?? {};
 
-  const { registerInput, baseTextInputProps, chainInput } =
-    useFormSmartScroll();
+    const { registerInput, baseTextInputProps, chainInput } =
+      useFormSmartScroll();
 
-  React.useEffect(() => {
-    registerInput(name.current, textInputRef);
-  }, []);
+    React.useEffect(() => {
+      registerInput(name.current, textInputRef);
+    }, []);
 
-  return (
-    <ViewWrapper name={name.current} style={props.containerStyle}>
-      {typeof props.renderInput === 'function' ? (
-        props.renderInput({
-          ...(textInputProps ?? {}),
-          onSubmitEditing: (e) => {
-            if (props.chainTo) {
-              chainInput(props.chainTo);
-            }
-
-            onSubmitEditing?.(e);
-          },
-          ...baseTextInputProps(name.current, {
-            onFocus,
-            onBlur,
-          }),
-          ref,
-        })
-      ) : (
-        <>
-          {props.renderTop?.()}
-          <RNTextInput
-            ref={ref}
-            {...baseTextInputProps(name.current, { onFocus, onBlur })}
-            {...textInputProps}
-            onSubmitEditing={(e) => {
+    return (
+      <ViewWrapper name={name.current} style={props.containerStyle}>
+        {typeof props.renderInput === 'function' ? (
+          props.renderInput({
+            ...(textInputProps ?? {}),
+            onSubmitEditing: (e) => {
               if (props.chainTo) {
                 chainInput(props.chainTo);
               }
 
               onSubmitEditing?.(e);
-            }}
-          />
-          {props.renderBottom?.()}
-        </>
-      )}
-    </ViewWrapper>
-  );
-};
+            },
+            ...baseTextInputProps(name.current, {
+              onFocus,
+              onBlur,
+            }),
+            ref,
+          })
+        ) : (
+          <>
+            {props.renderTop?.()}
+            <RNTextInput
+              ref={ref}
+              {...baseTextInputProps(name.current, { onFocus, onBlur })}
+              {...textInputProps}
+              onSubmitEditing={(e) => {
+                if (props.chainTo) {
+                  chainInput(props.chainTo);
+                }
+
+                onSubmitEditing?.(e);
+              }}
+            />
+            {props.renderBottom?.()}
+          </>
+        )}
+      </ViewWrapper>
+    );
+  }
+);