@react-native-ama/forms 1.0.1-alpha.2 → 1.0.1

package/dist/components/Form.d.ts

@@ -5,6 +5,7 @@ export type FormProps = React.PropsWithChildren<{
 }>;
 export type FormActions = {
     focusFirstInvalidField: () => void;
+    focusFieldAt: (fieldNumber: number) => void;
 };
 export declare const Form: React.ForwardRefExoticComponent<Omit<FormProps, "ref"> & React.RefAttributes<FormActions>>;
 export type FormContextValue = {
@@ -21,4 +22,6 @@ export type FormRef = {
     isEditable?: boolean;
 };
 export declare const FormContext: React.Context<FormContextValue | null>;
-export declare const useForm: () => FormContextValue;
+export declare const useForm: ({ suppressError }?: {
+    suppressError?: boolean | undefined;
+}) => FormContextValue;

package/dist/components/Form.js

@@ -41,7 +41,7 @@ exports.Form = React.forwardRef(({ children, onSubmit }, ref) => {
     const refs = React.useRef([]);
     const { setFocus } = (0, core_1.useFocus)();
     const checks = __DEV__ ? core_1.useChecks === null || core_1.useChecks === void 0 ? void 0 : (0, core_1.useChecks)() : undefined;
-    const focusField = (nextField) => {
+    const focusField = React.useCallback((nextField) => {
         var _a, _b, _c;
         /**
          * Refs passed as prop have another ".current"
@@ -80,38 +80,51 @@ exports.Form = React.forwardRef(({ children, onSubmit }, ref) => {
         else if (nextRefElement === null || nextRefElement === void 0 ? void 0 : nextRefElement.current) {
             setFocus(nextRefElement === null || nextRefElement === void 0 ? void 0 : nextRefElement.current);
         }
-    };
-    const submitForm = () => __awaiter(void 0, void 0, void 0, function* () {
-        const isValid = yield onSubmit();
-        if (isValid) {
-            return;
-        }
-        focusFirstInvalidField();
-    });
-    const focusFirstInvalidField = () => {
+    }, [checks, setFocus]);
+    const focusFieldAt = React.useCallback((position) => {
         react_native_1.InteractionManager.runAfterInteractions(() => {
             setTimeout(() => {
-                const fieldWithError = (refs.current || []).find(fieldRef => fieldRef.hasValidation && fieldRef.hasError);
-                __DEV__ &&
-                    fieldWithError == null &&
-                    (checks === null || checks === void 0 ? void 0 : checks.logResult('Form', {
-                        message: 'The form validation has failed, but no component with error was found',
-                        rule: 'NO_UNDEFINED',
-                    }));
+                const fieldWithError = refs.current[position];
                 focusField(fieldWithError);
             }, 0);
         });
-    };
+    }, [focusField]);
+    const focusFirstInvalidField = React.useCallback(() => {
+        const fieldWithError = (refs.current || []).findIndex(fieldRef => fieldRef.hasValidation && fieldRef.hasError);
+        __DEV__ &&
+            fieldWithError == null &&
+            (checks === null || checks === void 0 ? void 0 : checks.logResult('Form', {
+                message: 'The form validation has failed, but no component with error was found',
+                rule: 'NO_UNDEFINED',
+            }));
+        focusFieldAt(fieldWithError);
+    }, [focusFieldAt, checks]);
+    const submitForm = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const isValid = yield onSubmit();
+        if (isValid) {
+            return;
+        }
+        focusFirstInvalidField();
+    }), [focusFirstInvalidField, onSubmit]);
     React.useImperativeHandle(ref, () => ({
         focusFirstInvalidField,
+        focusFieldAt,
     }));
     return (<exports.FormContext.Provider value={{ refs: refs.current, submitForm, focusField }}>
         {children}
       </exports.FormContext.Provider>);
 });
 exports.FormContext = React.createContext(null);
-const useForm = () => {
+const DEFAULT_CONTEXT_VALUE = {
+    refs: [],
+    submitForm: () => Promise.resolve(),
+    focusField: () => { },
+};
+const useForm = ({ suppressError } = { suppressError: false }) => {
     const context = React.useContext(exports.FormContext);
+    if (!context && suppressError) {
+        return DEFAULT_CONTEXT_VALUE; // return default values so internal useForm hooks don't throw undefined errors when user choose to suppress errors
+    }
     if (!context) {
         __DEV__ &&
             console.error('Please wrap your form field inside the <Form /> component');

package/dist/hooks/useFormField.d.ts

@@ -12,8 +12,9 @@ export type UseFormField = {
     hasValidation: boolean;
     hasError?: boolean;
     errorMessage?: string;
+    suppressError?: boolean;
 };
-export declare const useFormField: ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable, style, }: UseFormField) => {
+export declare const useFormField: ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable, suppressError, style, }: UseFormField) => {
     focusNextFormField: () => void;
     isLastField: () => boolean;
     style: any;

package/dist/hooks/useFormField.js

@@ -9,8 +9,8 @@ const internal_1 = require("@react-native-ama/internal");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const Form_1 = require("../components/Form");
-const useFormField = ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable = true, style = {}, }) => {
-    const { refs, submitForm, focusField } = (0, Form_1.useForm)();
+const useFormField = ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable = true, suppressError, style = {}, }) => {
+    const { refs, submitForm, focusField } = (0, Form_1.useForm)({ suppressError });
     const fieldRef = react_1.default.useRef(ref);
     const checks = __DEV__ ? core_1.useChecks === null || core_1.useChecks === void 0 ? void 0 : (0, core_1.useChecks)() : undefined;
     const getMyIndex = () => {

package/dist/hooks/useTextInput.d.ts

@@ -18,7 +18,7 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     style: any;
     allowFontScaling?: boolean | undefined;
     autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
-    autoComplete?: "off" | "email" | "password" | "tel" | "url" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "country" | "current-password" | "family-name" | "gender" | "given-name" | "honorific-prefix" | "honorific-suffix" | "name" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "postal-code" | "street-address" | "sms-otp" | "tel-country-code" | "tel-national" | "tel-device" | "username" | "username-new" | undefined;
+    autoComplete?: "off" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "cc-name" | "cc-given-name" | "cc-middle-name" | "cc-family-name" | "cc-type" | "country" | "current-password" | "email" | "family-name" | "gender" | "given-name" | "honorific-prefix" | "honorific-suffix" | "name" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "password" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "postal-code" | "street-address" | "sms-otp" | "tel" | "tel-country-code" | "tel-national" | "tel-device" | "url" | "username" | "username-new" | undefined;
     autoCorrect?: boolean | undefined;
     autoFocus?: boolean | undefined;
     blurOnSubmit?: boolean | undefined;
@@ -45,6 +45,7 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     onKeyPress?: ((e: NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined;
     placeholder?: string | undefined;
     placeholderTextColor?: import("react-native").ColorValue | undefined;
+    readOnly?: boolean | undefined;
     returnKeyType?: ReturnKeyTypeOptions | undefined;
     enterKeyHint?: import("react-native").EnterKeyHintTypeOptions | undefined;
     secureTextEntry?: boolean | undefined;
@@ -152,9 +153,10 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     rejectResponderTermination?: boolean | null | undefined;
     selectionState?: import("react-native").DocumentSelectionState | undefined;
     spellCheck?: boolean | undefined;
-    textContentType?: "none" | "password" | "name" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | undefined;
+    textContentType?: "none" | "name" | "nickname" | "password" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "creditCardExpiration" | "creditCardExpirationMonth" | "creditCardExpirationYear" | "creditCardSecurityCode" | "creditCardType" | "creditCardName" | "creditCardGivenName" | "creditCardMiddleName" | "creditCardFamilyName" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | "birthdate" | "birthdateDay" | "birthdateMonth" | "birthdateYear" | undefined;
     scrollEnabled?: boolean | undefined;
     lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined;
+    smartInsertDelete?: boolean | undefined;
     cursorColor?: import("react-native").ColorValue | null | undefined;
     importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
     disableFullscreenUI?: boolean | undefined;
@@ -166,7 +168,7 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     underlineColorAndroid?: import("react-native").ColorValue | undefined;
     textAlignVertical?: "center" | "auto" | "top" | "bottom" | undefined;
     showSoftInputOnFocus?: boolean | undefined;
-    verticalAlign?: "auto" | "middle" | "top" | "bottom" | undefined;
+    verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined;
     labelComponent?: JSX.Element | undefined;
     labelPosition?: "beforeInput" | "afterInput" | undefined;
     nextFormField?: React.RefObject<import("react-native").TextInput> | undefined;
@@ -179,11 +181,12 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     focusNextFormField: () => void;
     isLastField: () => boolean;
     ref?: React.RefObject<any> | React.ForwardedRef<any> | undefined;
+    suppressError?: boolean | undefined;
     nextFormFieldRef?: React.RefObject<any> | undefined;
 } | {
     allowFontScaling?: boolean | undefined;
     autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
-    autoComplete?: "off" | "email" | "password" | "tel" | "url" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "country" | "current-password" | "family-name" | "gender" | "given-name" | "honorific-prefix" | "honorific-suffix" | "name" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "postal-code" | "street-address" | "sms-otp" | "tel-country-code" | "tel-national" | "tel-device" | "username" | "username-new" | undefined;
+    autoComplete?: "off" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "cc-name" | "cc-given-name" | "cc-middle-name" | "cc-family-name" | "cc-type" | "country" | "current-password" | "email" | "family-name" | "gender" | "given-name" | "honorific-prefix" | "honorific-suffix" | "name" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "password" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "postal-code" | "street-address" | "sms-otp" | "tel" | "tel-country-code" | "tel-national" | "tel-device" | "url" | "username" | "username-new" | undefined;
     autoCorrect?: boolean | undefined;
     autoFocus?: boolean | undefined;
     blurOnSubmit?: boolean | undefined;
@@ -210,6 +213,7 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     onKeyPress?: ((e: NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined;
     placeholder?: string | undefined;
     placeholderTextColor?: import("react-native").ColorValue | undefined;
+    readOnly?: boolean | undefined;
     returnKeyType?: ReturnKeyTypeOptions | undefined;
     enterKeyHint?: import("react-native").EnterKeyHintTypeOptions | undefined;
     secureTextEntry?: boolean | undefined;
@@ -318,9 +322,10 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     rejectResponderTermination?: boolean | null | undefined;
     selectionState?: import("react-native").DocumentSelectionState | undefined;
     spellCheck?: boolean | undefined;
-    textContentType?: "none" | "password" | "name" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | undefined;
+    textContentType?: "none" | "name" | "nickname" | "password" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "creditCardExpiration" | "creditCardExpirationMonth" | "creditCardExpirationYear" | "creditCardSecurityCode" | "creditCardType" | "creditCardName" | "creditCardGivenName" | "creditCardMiddleName" | "creditCardFamilyName" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | "birthdate" | "birthdateDay" | "birthdateMonth" | "birthdateYear" | undefined;
     scrollEnabled?: boolean | undefined;
     lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined;
+    smartInsertDelete?: boolean | undefined;
     cursorColor?: import("react-native").ColorValue | null | undefined;
     importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
     disableFullscreenUI?: boolean | undefined;
@@ -332,7 +337,7 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     underlineColorAndroid?: import("react-native").ColorValue | undefined;
     textAlignVertical?: "center" | "auto" | "top" | "bottom" | undefined;
     showSoftInputOnFocus?: boolean | undefined;
-    verticalAlign?: "auto" | "middle" | "top" | "bottom" | undefined;
+    verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined;
     labelComponent?: JSX.Element | undefined;
     labelPosition?: "beforeInput" | "afterInput" | undefined;
     nextFormField?: React.RefObject<import("react-native").TextInput> | undefined;
@@ -345,6 +350,7 @@ export declare const useTextInput: ({ onLayout, returnKeyType, onSubmitEditing,
     focusNextFormField: () => void;
     isLastField: () => boolean;
     ref?: React.RefObject<any> | React.ForwardedRef<any> | undefined;
+    suppressError?: boolean | undefined;
     nextFormFieldRef?: React.RefObject<any> | undefined;
 };
 export {};

package/dist/index.d.ts

@@ -1,16 +1,18 @@
 /// <reference types="react" />
+import { isFocused } from '@react-native-ama/internal';
 import { FormActions, FormProps } from './components/Form';
 import { FormField, FormFieldProps } from './components/FormField';
 import { FormSubmit, FormSubmitProps } from './components/FormSubmit';
-import { FormSwitchProps } from './components/FormSwitch';
+import { FormSwitch, FormSwitchProps } from './components/FormSwitch';
 type FormComponent = React.FunctionComponent<FormProps> & {
     Submit: (props: FormSubmitProps) => JSX.Element;
     Field: React.FunctionComponent<FormFieldProps>;
     Switch: (props: FormSwitchProps) => JSX.Element;
 };
 declare const Form: FormComponent;
-export { Form, FormField, FormSubmit };
+export { Form, FormField, FormSubmit, FormSwitch };
 export { TextInput } from './components/TextInput';
 export { useFormField } from './hooks/useFormField';
 export { useTextInput } from './hooks/useTextInput';
+export { isFocused };
 export { type FormProps, type FormActions, type FormFieldProps, type FormSubmitProps, type FormSwitchProps, };

package/dist/index.js

@@ -1,13 +1,16 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTextInput = exports.useFormField = exports.TextInput = exports.FormSubmit = exports.FormField = exports.Form = void 0;
 // Components
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFocused = exports.useTextInput = exports.useFormField = exports.TextInput = exports.FormSwitch = exports.FormSubmit = exports.FormField = exports.Form = void 0;
+const internal_1 = require("@react-native-ama/internal");
+Object.defineProperty(exports, "isFocused", { enumerable: true, get: function () { return internal_1.isFocused; } });
 const Form_1 = require("./components/Form");
 const FormField_1 = require("./components/FormField");
 Object.defineProperty(exports, "FormField", { enumerable: true, get: function () { return FormField_1.FormField; } });
 const FormSubmit_1 = require("./components/FormSubmit");
 Object.defineProperty(exports, "FormSubmit", { enumerable: true, get: function () { return FormSubmit_1.FormSubmit; } });
 const FormSwitch_1 = require("./components/FormSwitch");
+Object.defineProperty(exports, "FormSwitch", { enumerable: true, get: function () { return FormSwitch_1.FormSwitch; } });
 // @ts-ignore
 const Form = Form_1.Form;
 exports.Form = Form;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ama/forms",
-  "version": "1.0.1-alpha.2",
+  "version": "1.0.1",
   "private": false,
   "react-native": "src/index",
   "types": "dist/index.d.ts",
@@ -24,9 +24,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@react-native-ama/core": "~1.0.1-alpha.1",
-    "@react-native-ama/internal": "~1.0.1-alpha.1",
-    "@react-native-ama/react-native": "~1.0.1-alpha.1"
+    "@react-native-ama/core": "~1.0.1",
+    "@react-native-ama/internal": "~1.0.1",
+    "@react-native-ama/react-native": "~1.0.1"
   },
   "peerDependencies": {
     "react": "*",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/FormidableLabs/react-native-ama#readme",
   "publishConfig": {
-    "provenance": false
+    "provenance": true
   },
   "author": "",
   "license": "MIT",

package/src/components/Form.tsx

@@ -5,11 +5,12 @@ import { InteractionManager } from 'react-native';
 
 export type FormProps = React.PropsWithChildren<{
   onSubmit: () => boolean | Promise<boolean>;
-  ref?: React.RefObject<FormActions>;
+  ref?: React.RefObject<FormActions>; // need to explicitly type for inference in <Form /> component
 }>;
 
 export type FormActions = {
   focusFirstInvalidField: () => void;
+  focusFieldAt: (fieldNumber: number) => void;
 };
 
 export const Form = React.forwardRef<FormActions, FormProps>(
@@ -19,51 +20,83 @@ export const Form = React.forwardRef<FormActions, FormProps>(
 
     const checks = __DEV__ ? useChecks?.() : undefined;
 
-    const focusField = (nextField?: Partial<FormRef> | undefined) => {
-      /**
-       * Refs passed as prop have another ".current"
-       */
-      const nextRefElement = nextField?.ref?.current?.current
-        ? nextField?.ref.current
-        : nextField?.ref;
+    const focusField = React.useCallback(
+      (nextField?: Partial<FormRef> | undefined) => {
+        /**
+         * Refs passed as prop have another ".current"
+         */
+        const nextRefElement = nextField?.ref?.current?.current
+          ? nextField?.ref.current
+          : nextField?.ref;
+
+        const callFocus =
+          // @ts-ignore
+          nextRefElement?.current?.focus &&
+          nextField?.hasFocusCallback &&
+          nextField?.isEditable;
+
+        __DEV__ &&
+          nextRefElement == null &&
+          checks?.logResult('nextRefElement', {
+            message:
+              'No next field found. Make sure you wrapped your form inside the <Form /> component',
+            rule: 'NO_UNDEFINED',
+          });
+
+        if (callFocus) {
+          /**
+           * On some apps, if we call focus immediately and the field is already focused we lose the focus.
+           * Same happens if we do not call `focus` if the field is already focused.
+           */
+          const timeoutValue = isFocused(nextRefElement.current) ? 50 : 0;
+
+          setTimeout(() => {
+            nextRefElement?.current?.focus();
+
+            __DEV__ &&
+              nextRefElement &&
+              checks?.checkFocusTrap({
+                ref: nextRefElement,
+                shouldHaveFocus: true,
+              });
+          }, timeoutValue);
+        } else if (nextRefElement?.current) {
+          setFocus(nextRefElement?.current);
+        }
+      },
+      [checks, setFocus],
+    );
 
-      const callFocus =
-        // @ts-ignore
-        nextRefElement?.current?.focus &&
-        nextField?.hasFocusCallback &&
-        nextField?.isEditable;
+    const focusFieldAt = React.useCallback(
+      (position: number) => {
+        InteractionManager.runAfterInteractions(() => {
+          setTimeout(() => {
+            const fieldWithError = refs.current[position];
+
+            focusField(fieldWithError);
+          }, 0);
+        });
+      },
+      [focusField],
+    );
+
+    const focusFirstInvalidField = React.useCallback(() => {
+      const fieldWithError = (refs.current || []).findIndex(
+        fieldRef => fieldRef.hasValidation && fieldRef.hasError,
+      );
 
       __DEV__ &&
-        nextRefElement == null &&
-        checks?.logResult('nextRefElement', {
+        fieldWithError == null &&
+        checks?.logResult('Form', {
           message:
-            'No next field found. Make sure you wrapped your form inside the <Form /> component',
+            'The form validation has failed, but no component with error was found',
           rule: 'NO_UNDEFINED',
         });
 
-      if (callFocus) {
-        /**
-         * On some apps, if we call focus immediately and the field is already focused we lose the focus.
-         * Same happens if we do not call `focus` if the field is already focused.
-         */
-        const timeoutValue = isFocused(nextRefElement.current) ? 50 : 0;
-
-        setTimeout(() => {
-          nextRefElement?.current?.focus();
-
-          __DEV__ &&
-            nextRefElement &&
-            checks?.checkFocusTrap({
-              ref: nextRefElement,
-              shouldHaveFocus: true,
-            });
-        }, timeoutValue);
-      } else if (nextRefElement?.current) {
-        setFocus(nextRefElement?.current);
-      }
-    };
+      focusFieldAt(fieldWithError);
+    }, [focusFieldAt, checks]);
 
-    const submitForm = async () => {
+    const submitForm = React.useCallback(async () => {
       const isValid = await onSubmit();
 
       if (isValid) {
@@ -71,30 +104,11 @@ export const Form = React.forwardRef<FormActions, FormProps>(
       }
 
       focusFirstInvalidField();
-    };
-
-    const focusFirstInvalidField = () => {
-      InteractionManager.runAfterInteractions(() => {
-        setTimeout(() => {
-          const fieldWithError = (refs.current || []).find(
-            fieldRef => fieldRef.hasValidation && fieldRef.hasError,
-          );
-
-          __DEV__ &&
-            fieldWithError == null &&
-            checks?.logResult('Form', {
-              message:
-                'The form validation has failed, but no component with error was found',
-              rule: 'NO_UNDEFINED',
-            });
-
-          focusField(fieldWithError);
-        }, 0);
-      });
-    };
+    }, [focusFirstInvalidField, onSubmit]);
 
     React.useImperativeHandle(ref, () => ({
       focusFirstInvalidField,
+      focusFieldAt,
     }));
 
     return (
@@ -123,8 +137,21 @@ export type FormRef = {
 
 export const FormContext = React.createContext<FormContextValue | null>(null);
 
-export const useForm = () => {
+const DEFAULT_CONTEXT_VALUE: FormContextValue = {
+  refs: [],
+  submitForm: () => Promise.resolve(),
+  focusField: () => {},
+};
+
+export const useForm = (
+  { suppressError }: { suppressError?: boolean } = { suppressError: false },
+) => {
   const context = React.useContext(FormContext);
+
+  if (!context && suppressError) {
+    return DEFAULT_CONTEXT_VALUE; // return default values so internal useForm hooks don't throw undefined errors when user choose to suppress errors
+  }
+
   if (!context) {
     __DEV__ &&
       console.error(
@@ -134,5 +161,6 @@ export const useForm = () => {
       'useForm must be used within a FormContextProvider, please wrap your form field inside the <Form /> component',
     );
   }
+
   return context;
 };

package/src/components/FormSubmit.test.tsx

@@ -32,7 +32,7 @@ describe('FormSubmit', () => {
     );
   });
 
-  it('hides the children from the accessiblity tree', () => {
+  it('hides the children from the accessibility tree', () => {
     const { getByTestId } = render(
       <FormSubmit
         accessibilityLabel="This is the label"

package/src/hooks/useFormField.ts

@@ -17,6 +17,7 @@ export type UseFormField = {
   hasValidation: boolean;
   hasError?: boolean;
   errorMessage?: string;
+  suppressError?: boolean;
 };
 
 export const useFormField = ({
@@ -30,9 +31,10 @@ export const useFormField = ({
   accessibilityHint,
   errorMessage,
   editable = true,
+  suppressError,
   style = {},
 }: UseFormField) => {
-  const { refs, submitForm, focusField } = useForm();
+  const { refs, submitForm, focusField } = useForm({ suppressError });
   const fieldRef = React.useRef(ref);
 
   const checks = __DEV__ ? useChecks?.() : undefined;

package/src/index.ts

@@ -1,4 +1,7 @@
 // Components
+
+import { isFocused } from '@react-native-ama/internal';
+
 import {
   FormActions,
   FormProps,
@@ -20,7 +23,7 @@ Form.Submit = FormSubmit;
 Form.Field = FormField;
 Form.Switch = FormSwitch;
 
-export { Form, FormField, FormSubmit };
+export { Form, FormField, FormSubmit, FormSwitch };
 
 // Components
 export { TextInput } from './components/TextInput';
@@ -29,6 +32,9 @@ export { TextInput } from './components/TextInput';
 export { useFormField } from './hooks/useFormField';
 export { useTextInput } from './hooks/useTextInput';
 
+// utils
+export { isFocused };
+
 // Types
 export {
   type FormProps,