@bigbinary/neeto-commons-rn 2.2.0 → 2.2.4

package/src/config/bugsnag.ts

@@ -1,5 +1,9 @@
 import BugsnagPluginReactNavigation from "@bugsnag/plugin-react-navigation";
-import Bugsnag, { type NotifiableError } from "@bugsnag/react-native";
+import Bugsnag, {
+  type Event,
+  type NotifiableError,
+} from "@bugsnag/react-native";
+import Config from "react-native-config";
 
 import {
   isEventErrorsNetworkRelated,
@@ -9,20 +13,68 @@ import {
 import { getLogRocketSessionURL } from "../initializers/logRocket";
 import { Store } from "../store";
 
+// Mirrors the stage the native layer reports. Host apps set ENVIRONMENT per
+// flavour in their .env files and feed the same value to the native Bugsnag
+// config; without it every build reported as "production" — the native
+// default for a release build — so QA traffic from staging installs was
+// indistinguishable from real user traffic in the dashboard.
+const releaseStage = Config.ENVIRONMENT || "production";
+
+// Errors we must see even though their message reads like network noise.
+// isNetworkError matches /timeout/i, and FCM rejects token registration with
+// "java.io.IOException: TIMEOUT" — so restoring a real message to these
+// reports would otherwise make them disappear entirely, which is worse than
+// the "{}" it replaced. The global onError filter runs *before* any
+// per-notify callback (@bugsnag/core/client.js), so a callback cannot undo
+// the drop; the marker has to travel on the error itself. A WeakSet keeps it
+// off the reported payload.
+const alwaysReported = new WeakSet<object>();
+
+const isAlwaysReported = (error: unknown): boolean =>
+  typeof error === "object" && error !== null && alwaysReported.has(error);
+
+// Survives a circular throw, and `undefined` rather than an empty message.
+const describeThrown = (error: unknown): string => {
+  try {
+    return JSON.stringify(error) ?? String(error);
+  } catch {
+    return String(error);
+  }
+};
+
+// Normalizes a caught `unknown` before it reaches Bugsnag, and exempts it
+// from the network filter above. Never hand a caught value to JSON.stringify
+// on the way in: Bugsnag reads `message` and `stack` off an Error and both
+// are non-enumerable, and NativeFirebaseError defines every one of its own
+// fields (`code`, `userInfo`, `nativeErrorCode`) non-enumerable too. A
+// stringified FCM rejection lands in the dashboard as the literal "{}" — no
+// message, and a "(native)" line-0 frame that groups it with every other
+// message-less report.
+export const toNotifiableError = (error: unknown): Error => {
+  const normalized =
+    error instanceof Error ? error : new Error(describeThrown(error));
+  alwaysReported.add(normalized);
+
+  return normalized;
+};
+
 export const bugsnagErrorHandler = (
   err: NotifiableError,
   origin: string,
   // Pass a hash for failures that would otherwise fragment into a group per
   // resource or per status code.
-  groupingHash?: string
+  groupingHash?: string,
+  // Handled reports default to "warning"; pass "error" for a failure that
+  // breaks the feature rather than degrading it.
+  severity: Event["severity"] = "warning"
 ) => {
   if (!__DEV__) {
     Bugsnag.notify(err, event => {
-      if (isNetworkError(err)) {
+      if (!isAlwaysReported(err) && isNetworkError(err)) {
         return false;
       }
 
-      event.severity = "warning";
+      event.severity = severity;
       event.context = origin;
 
       if (groupingHash) {
@@ -36,6 +88,12 @@ export const bugsnagErrorHandler = (
 
 export const configureBugsnag = () => {
   if (!__DEV__) {
+    // releaseStage and enabledReleaseStages are deliberately absent: the RN
+    // notifier only accepts onError/onBreadcrumb/logger/metadata/user/
+    // context/plugins/codeBundleId/featureFlags here, because the native
+    // layer owns the stage so that native crashes are tagged correctly too.
+    // Host apps set it in AndroidManifest.xml and Info.plist; see
+    // docs/bugsnag-release-stages.md.
     Bugsnag.start({
       onError: event => {
         const auth = Store.getState().auth;
@@ -43,11 +101,33 @@ export const configureBugsnag = () => {
           event.setUser(auth.userId, auth.email, auth.name);
         }
 
-        if (event.device?.emulator) {
+        // Only in production: QA runs release builds on emulators on purpose,
+        // and dropping those would hide the very failures they are hunting.
+        // Bugsnag's own flag is unreliable — sdk_gphone images self-report
+        // `emulator: false` — so also match the well-known emulator model
+        // names. Stage separation alone does not cover QA running
+        // production-stage builds on emulators.
+        const deviceModel = event.device?.model?.toLowerCase() ?? "";
+        const isKnownEmulator =
+          event.device?.emulator ||
+          deviceModel.startsWith("sdk_gphone") ||
+          deviceModel.startsWith("generic") ||
+          deviceModel.startsWith("emulator") ||
+          deviceModel.includes("android sdk built for");
+        if (releaseStage === "production" && isKnownEmulator) {
           return false;
         }
 
-        if (isEventErrorsNetworkRelated(event)) {
+        // Handled axios noise only. This filter matches on message text
+        // (/timeout/i, /network error/i…), and an unhandled crash whose
+        // message happens to contain one of those words is still a crash —
+        // "Timeout of 30000ms exceeded while rendering TicketList" was being
+        // discarded outright.
+        if (
+          !event.unhandled &&
+          !isAlwaysReported(event.originalError) &&
+          isEventErrorsNetworkRelated(event)
+        ) {
           return false;
         }
 

package/src/constants/index.ts

@@ -4,6 +4,16 @@ export const STORAGE_KEYS = {
   DEVICE_TOKEN: "devicetoken",
   IS_VISITED: "isVisited",
   NOTIFICATION_PERMISSION_REQUESTED: "notificationPermissionRequested",
+  /**
+   * Read-only fallback. Before this key existed here, every app kept its own
+   * "have we asked yet?" flag under this exact string -- neeto-desk,
+   * neeto-cal, neeto-form and neeto-invoice all wrote it verbatim from their
+   * own constants. An app adopting the hooks here would otherwise start with
+   * a null flag and re-prompt everyone who had already declined, so the
+   * request path reads this when its own key is unset. Never written; drop it
+   * once installs have rolled over.
+   */
+  LEGACY_APP_NOTIFICATION_PROMPT_DONE: "notification_first_prompt_done",
 } as const;
 
 export const DEFAULT_PAGE_SIZE = 30;
@@ -18,5 +28,7 @@ export const APP_VERSION_ERROR_REPORT_INTERVAL = 60 * 60 * 1000;
 /** One Bugsnag group for every app_versions failure, whatever the status. */
 export const APP_VERSION_ERROR_GROUPING_HASH = "app-version-check-failed";
 
+export const AUTH_BUTTON_HEIGHT = 48;
+
 /** Design baseline: a ~5" phone, the width every scaled size was drawn against. */
 export const GUIDELINE_BASE_WIDTH = 350;

package/src/helpers/notifications/index.ts

@@ -2,3 +2,7 @@ export { usePushNotification } from "./usePushNotification";
 export { registerBackgroundHandlers } from "./registerBackgroundHandlers";
 export { NOTIFICATION_CHANNELS, NOTIFICATION_CHANNEL_IDS } from "./constants";
 export { getInitialFirebaseNotification } from "./firebaseMessaging";
+export {
+  hasBeenPromptedForNotifications,
+  needsNotificationPermissionPrompt,
+} from "./permission";

package/src/helpers/notifications/permission.ts

@@ -0,0 +1,56 @@
+import { Platform } from "react-native";
+
+import { STORAGE_KEYS } from "../../constants";
+import { getItem } from "../asyncStore";
+
+/**
+ * Whether this device has a notification permission worth asking for.
+ *
+ * Android only gained a runtime notification permission in 13 (API 33);
+ * below that the manifest entry is the whole story and there is nothing to
+ * prompt for. Every iOS version needs asking.
+ *
+ * Consuming apps used to hand-roll this as
+ * `Platform.OS !== "android" || Platform.Version < 33`, which returns early
+ * on iOS as well and so never asked there at all. neeto-desk shipped that
+ * for months; neeto-form and neeto-invoice still carry the same line. Owning
+ * it here is the point of this module.
+ *
+ * Note that `Platform.Version` is a number on Android and a string on iOS,
+ * so the version comparison is only meaningful once the OS is known to be
+ * Android. Coercing keeps a string version from silently comparing as NaN.
+ *
+ * Parameters are injectable so the platform matrix is testable without
+ * mutating the Platform module.
+ */
+export const needsNotificationPermissionPrompt = (
+  os: typeof Platform.OS = Platform.OS,
+  version: typeof Platform.Version = Platform.Version
+) => os !== "android" || Number(version) >= 33;
+
+/**
+ * Has this install already been through the prompt?
+ *
+ * Falls back to the app-local flag every consuming app used to keep under
+ * "notification_first_prompt_done". Without that read, an app adopting these
+ * hooks starts with a null flag, decides nobody has been asked, and
+ * re-prompts everyone whose status is still DENIED -- on Android 13+ that is
+ * every user who declined exactly once, since Android allows a second ask.
+ * iOS is unaffected either way: a prior denial reads BLOCKED, not DENIED.
+ *
+ * A fallback read rather than a migration, on purpose. A migration would have
+ * to finish before the requesting hook mounts -- it prompts on mount -- which
+ * means gating the gate on an async seed. Reading both keys has no ordering
+ * to get wrong, is idempotent, and covers every app at once because they all
+ * wrote the identical string.
+ */
+export const hasBeenPromptedForNotifications = async () => {
+  const current = await getItem(STORAGE_KEYS.NOTIFICATION_PERMISSION_REQUESTED);
+  if (current !== null) return true;
+
+  const legacy = await getItem(
+    STORAGE_KEYS.LEGACY_APP_NOTIFICATION_PROMPT_DONE
+  );
+
+  return legacy !== null;
+};

package/src/helpers/notifications/registerBackgroundHandlers.ts

@@ -21,18 +21,29 @@ export const registerBackgroundHandlers = (
       // Data-only messages need manual display; notification-type messages
       // are displayed by the OS automatically.
       if (remoteMessage.data && !remoteMessage.notification) {
+        // Non-string values fail notifee's data validation — demo pushes from
+        // tower carry no url, for instance.
+        const data = Object.fromEntries(
+          Object.entries(remoteMessage.data).filter(
+            ([, value]) => typeof value === "string"
+          )
+        ) as Record<string, string>;
+
+        // MIUI and other OEM launchers read the numeric badge off the active
+        // notification (setNumber), not from any badge API.
+        const unreadCount = Number(data.unread_count);
+
         await notifee.displayNotification({
-          // FCM types a data value as string | object | number; the neeto
-          // notifications engine only ever sends strings.
-          title: (remoteMessage.data.title as string) || "New Notification",
-          body:
-            (remoteMessage.data.message as string) || "You have a new message",
-          data: remoteMessage.data,
+          title: data.title || "New Notification",
+          body: data.message || "You have a new message",
+          data,
           android: {
             channelId: "default",
             smallIcon: "ic_notification",
             sound: "default",
             pressAction: { id: "default" },
+            ...(Number.isFinite(unreadCount) &&
+              unreadCount > 0 && { badgeCount: unreadCount }),
           },
         });
       }

package/src/helpers/notifications/usePushNotification.ts

@@ -13,7 +13,7 @@ import {
   type PressedNotification,
 } from "./types";
 
-import { bugsnagErrorHandler } from "../../config/bugsnag";
+import { bugsnagErrorHandler, toNotifiableError } from "../../config/bugsnag";
 import { STORAGE_KEYS } from "../../constants";
 import { useNotification } from "../../hooks/query/useNotification";
 import { useAppState } from "../../hooks/useAppState";
@@ -52,7 +52,7 @@ export const usePushNotification = (
         const { status } = await checkNotifications();
         setNotificationPermission(status === RESULTS.GRANTED);
       } catch (error) {
-        bugsnagErrorHandler(JSON.stringify(error), "notification");
+        bugsnagErrorHandler(toNotifiableError(error), "notification");
       }
     };
 
@@ -127,30 +127,37 @@ export const usePushNotification = (
     if (Platform.OS !== "android") return undefined;
 
     const unsubscribe = messaging().onMessage(async remoteMessage => {
-      // FCM types a data value as string | object | number; the neeto
-      // notifications engine only ever sends strings.
+      // Non-string values (or a missing key sent as undefined) fail notifee's
+      // data validation — demo pushes from tower carry no url, for instance.
+      const data = Object.fromEntries(
+        Object.entries(remoteMessage.data ?? {}).filter(
+          ([, value]) => typeof value === "string"
+        )
+      ) as Record<string, string>;
+
       const title =
-        remoteMessage.notification?.title ||
-        (remoteMessage.data?.title as string) ||
-        "New Notification";
+        remoteMessage.notification?.title || data.title || "New Notification";
 
       const body =
         remoteMessage.notification?.body ||
-        (remoteMessage.data?.message as string) ||
+        data.message ||
         "You have a new message";
 
+      // MIUI and other OEM launchers read the numeric badge off the active
+      // notification (setNumber), not from any badge API.
+      const unreadCount = Number(data.unread_count);
+
       await notifee.displayNotification({
         title,
         body,
-        data: { url: remoteMessage.data?.url, ...remoteMessage.data } as Record<
-          string,
-          string | number | object
-        >,
+        data,
         android: {
           channelId: "default",
           smallIcon: "ic_notification",
           sound: "default",
           pressAction: { id: "default" },
+          ...(Number.isFinite(unreadCount) &&
+            unreadCount > 0 && { badgeCount: unreadCount }),
         },
       });
     });
@@ -194,7 +201,7 @@ export const usePushNotification = (
       }
       await handleTokenRegistration(token);
     } catch (error) {
-      bugsnagErrorHandler(JSON.stringify(error), "notification");
+      bugsnagErrorHandler(toNotifiableError(error), "notification");
     }
   }, [createChannels, handleTokenRegistration]);
 

package/src/hooks/index.ts

@@ -1,2 +1,4 @@
 export { useLocalization } from "../contexts/localization";
 export { usePushNotificationPermissions } from "./usePushNotificationPermissions";
+export { useNotificationPermissionStatus } from "./useNotificationPermissionStatus";
+export { useRequestNotificationPermission } from "./useRequestNotificationPermission";

package/src/hooks/query/useAuth.ts

@@ -166,7 +166,12 @@ export const useAuth = () => {
         text2: getErrorMessage(error?.response?.data, error),
       });
 
-      bugsnagErrorHandler(error, "verify_otp_error");
+      // A 401 here is a wrong or expired OTP — a user typo, not a defect.
+      // Reporting it made this the single loudest error in the project. The
+      // axios interceptor already skips 401s; this path bypassed it.
+      if (status !== 401) {
+        bugsnagErrorHandler(error, "verify_otp_error");
+      }
     }
   };
 

package/src/hooks/query/useNotification.ts

@@ -16,7 +16,7 @@ import {
   fetchNotificationsAPI,
   markAllNotificationsReadAPI,
 } from "../../api/notifications";
-import { bugsnagErrorHandler } from "../../config/bugsnag";
+import { bugsnagErrorHandler, toNotifiableError } from "../../config/bugsnag";
 import { STORAGE_KEYS, DEFAULT_PAGE_SIZE } from "../../constants";
 import { removeItem, setItem } from "../../helpers/asyncStore";
 import { removeSecureValue } from "../../helpers/keychain";
@@ -35,7 +35,7 @@ export const useNotification = () => {
           setItem(STORAGE_KEYS.DEVICE_TOKEN, response.device.device_token);
         },
         onError: error => {
-          bugsnagErrorHandler(JSON.stringify(error), "notification");
+          bugsnagErrorHandler(toNotifiableError(error), "notification");
         },
       }),
     useFetchNotifications: () => {

package/src/hooks/useNotificationPermissionStatus.ts

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useState } from "react";
+import { AppState } from "react-native";
+
+import { RESULTS, checkNotifications } from "react-native-permissions";
+
+import { needsNotificationPermissionPrompt } from "../helpers/notifications/permission";
+
+/**
+ * Read-only view of the notification permission.
+ *
+ * Deliberately never requests. A screen that merely displays whether
+ * notifications are on -- every app's Profile -- must not be the thing that
+ * asks, or users who never open it are never asked at all. That is exactly
+ * what usePushNotificationPermissions caused by combining the two: it was
+ * called from Profile because Profile is where the status is shown, which
+ * made a settings screen the app's only requester. Use PushPermissionGate
+ * for the asking.
+ *
+ * Re-checks on foreground, because the only way back from a denial is the
+ * system Settings app, which means leaving the app and returning.
+ */
+export const useNotificationPermissionStatus = () => {
+  const [isGranted, setIsGranted] = useState(false);
+
+  const check = useCallback(async () => {
+    // Below Android 13 there is no runtime permission to be missing, so the
+    // honest answer is "granted" rather than whatever checkNotifications
+    // reports.
+    if (!needsNotificationPermissionPrompt()) {
+      setIsGranted(true);
+
+      return;
+    }
+
+    const { status } = await checkNotifications();
+    setIsGranted(status === RESULTS.GRANTED);
+  }, []);
+
+  useEffect(() => {
+    check();
+
+    const subscription = AppState.addEventListener("change", nextState => {
+      if (nextState === "active") check();
+    });
+
+    return () => subscription.remove();
+  }, [check]);
+
+  return isGranted;
+};

package/src/hooks/usePushNotificationPermissions.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from "react";
-import { AppState, Platform } from "react-native";
+import { AppState } from "react-native";
 
 import {
   RESULTS,
@@ -8,10 +8,22 @@ import {
   type PermissionStatus,
 } from "react-native-permissions";
 
-import { bugsnagErrorHandler } from "../config/bugsnag";
+import { bugsnagErrorHandler, toNotifiableError } from "../config/bugsnag";
 import { STORAGE_KEYS } from "../constants";
-import { getItem, setItem } from "../helpers/asyncStore";
-
+import { setItem } from "../helpers/asyncStore";
+import {
+  hasBeenPromptedForNotifications,
+  needsNotificationPermissionPrompt,
+} from "../helpers/notifications/permission";
+
+/**
+ * @deprecated Checks and requests in one call, which is why every app that
+ * wanted to *display* the status ended up making its Profile screen the only
+ * thing that ever *asked* -- see neetozone/neeto-chat-rn#788. Prefer
+ * `useNotificationPermissionStatus()` to read and `<PushPermissionGate />`
+ * (or `useRequestNotificationPermission()`) to ask. Kept working for
+ * consumers that have not moved yet.
+ */
 export const usePushNotificationPermissions = () => {
   const [appState, setAppState] = useState(AppState.currentState);
   const [notificationPermission, setNotificationPermission] = useState(false);
@@ -31,7 +43,7 @@ export const usePushNotificationPermissions = () => {
     status?: PermissionStatus;
   }> => {
     try {
-      if (Platform.OS === "android" && Platform.Version < 33) {
+      if (!needsNotificationPermissionPrompt()) {
         return { isGranted: true };
       }
 
@@ -42,7 +54,7 @@ export const usePushNotificationPermissions = () => {
         status,
       };
     } catch (error) {
-      bugsnagErrorHandler(JSON.stringify(error), "notification");
+      bugsnagErrorHandler(toNotifiableError(error), "notification");
 
       return { isGranted: false };
     }
@@ -50,11 +62,10 @@ export const usePushNotificationPermissions = () => {
 
   const requestNotificationPermission = useCallback(async () => {
     try {
-      const permissionRequested = await getItem(
-        STORAGE_KEYS.NOTIFICATION_PERMISSION_REQUESTED
-      );
-
-      if (permissionRequested !== null) {
+      // Reads the app-local legacy flag too, so an app that has been
+      // writing "notification_first_prompt_done" does not re-prompt everyone
+      // who already declined.
+      if (await hasBeenPromptedForNotifications()) {
         return false;
       }
 
@@ -73,7 +84,7 @@ export const usePushNotificationPermissions = () => {
 
       return false;
     } catch (error) {
-      bugsnagErrorHandler(JSON.stringify(error), "notification");
+      bugsnagErrorHandler(toNotifiableError(error), "notification");
 
       return false;
     }
@@ -97,7 +108,7 @@ export const usePushNotificationPermissions = () => {
           setNotificationPermission(false);
         }
       } catch (error) {
-        bugsnagErrorHandler(JSON.stringify(error), "notification");
+        bugsnagErrorHandler(toNotifiableError(error), "notification");
         setNotificationPermission(false);
       }
     };

package/src/hooks/useRequestNotificationPermission.ts

@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+
+import {
+  RESULTS,
+  checkNotifications,
+  requestNotifications,
+} from "react-native-permissions";
+
+import { bugsnagErrorHandler, toNotifiableError } from "../config/bugsnag";
+import { STORAGE_KEYS } from "../constants";
+import { setItem } from "../helpers/asyncStore";
+import {
+  hasBeenPromptedForNotifications,
+  needsNotificationPermissionPrompt,
+} from "../helpers/notifications/permission";
+
+/**
+ * Asks for notification permission once per install, and nothing else.
+ *
+ * Prefer mounting PushPermissionGate inside the signed-in branch of the
+ * navigator; this hook is what it wraps, exported for apps that need to
+ * trigger the request from somewhere other than a mount.
+ *
+ * Only asks when the status is DENIED. GRANTED needs nothing and BLOCKED
+ * cannot be reopened from inside the app -- sending a blocked user to
+ * Settings is denied-state recovery, which belongs to the UI, not here.
+ */
+export const useRequestNotificationPermission = (enabled = true) => {
+  useEffect(() => {
+    const request = async () => {
+      try {
+        if (!enabled || !needsNotificationPermissionPrompt()) return;
+
+        if (await hasBeenPromptedForNotifications()) return;
+
+        const { status } = await checkNotifications();
+        if (status !== RESULTS.DENIED) return;
+
+        const result = await requestNotifications(["alert", "sound", "badge"]);
+
+        await setItem(
+          STORAGE_KEYS.NOTIFICATION_PERMISSION_REQUESTED,
+          result.status === RESULTS.GRANTED
+        );
+      } catch (error) {
+        // Written even on failure: without it a throwing request retries on
+        // every foreground, which is a prompt loop rather than one prompt.
+        await setItem(STORAGE_KEYS.NOTIFICATION_PERMISSION_REQUESTED, false);
+        bugsnagErrorHandler(toNotifiableError(error), "notification");
+      }
+    };
+
+    request();
+  }, [enabled]);
+};

package/src/providers/NeetoCommonsRNProvider.tsx

@@ -68,14 +68,17 @@ export const NeetoCommonsRNProvider = ({
 }: NeetoCommonsRNProviderProps) => {
   const prevReducersRef = useRef<Record<string, Reducer> | null>(null);
   const prevBlacklistRef = useRef<string[] | undefined>(undefined);
-  if (
-    prevReducersRef.current !== hostRootReducer ||
-    prevBlacklistRef.current !== blacklistedReducers
-  ) {
-    prevReducersRef.current = hostRootReducer;
-    prevBlacklistRef.current = blacklistedReducers;
-    updateRootReducer({ reducers: hostRootReducer, blacklistedReducers });
-  }
+
+  useLayoutEffect(() => {
+    if (
+      prevReducersRef.current !== hostRootReducer ||
+      prevBlacklistRef.current !== blacklistedReducers
+    ) {
+      prevReducersRef.current = hostRootReducer;
+      prevBlacklistRef.current = blacklistedReducers;
+      updateRootReducer({ reducers: hostRootReducer, blacklistedReducers });
+    }
+  }, [hostRootReducer, blacklistedReducers]);
 
   useLayoutEffect(() => {
     setHostNavigationRef(hostNavigationRef);

package/src/screens/authentication/AuthOptions.tsx

@@ -24,6 +24,7 @@ import {
 
 import { SocialButton } from "../../components/SocialButton";
 import { bugsnagErrorHandler } from "../../config/bugsnag";
+import { AUTH_BUTTON_HEIGHT } from "../../constants";
 import { useLocalization } from "../../contexts/localization";
 import { removeSecureValue } from "../../helpers/keychain";
 import { moderateScale } from "../../helpers/scale";
@@ -196,6 +197,7 @@ export const AuthOptions = ({
       <Button
         isLoading={buttonLoading}
         label={strings.commons.buttons.continue}
+        style={styles.primaryButton}
         onPress={() => handleOnLogin("email")}
       />
       <Container style={styles.separatorRow}>
@@ -235,6 +237,9 @@ export const AuthOptions = ({
 };
 
 const styles = StyleSheet.create({
+  primaryButton: {
+    height: moderateScale(AUTH_BUTTON_HEIGHT),
+  },
   appleButton: {
     marginTop: moderateScale(24),
   },

package/src/screens/authentication/OTPVerificationScreen.tsx

@@ -13,7 +13,9 @@ import {
 } from "@bigbinary/neetoui-rn";
 import { useFocusEffect } from "@react-navigation/native";
 
+import { AUTH_BUTTON_HEIGHT } from "../../constants";
 import { useLocalization } from "../../contexts/localization";
+import { moderateScale } from "../../helpers/scale";
 import { useAuth } from "../../hooks/query/useAuth";
 import { type CommonsScreenProps } from "../../navigation/types";
 
@@ -151,6 +153,7 @@ export const OTPVerificationScreen = ({
           <Button
             disabled={Boolean(resendTimer)}
             isLoading={isGeneratingOTP}
+            style={styles.authButton}
             variant="text"
             // `formatString` returns a plain string whenever every argument is
             // one, which is the case here.
@@ -172,6 +175,7 @@ export const OTPVerificationScreen = ({
             disabled={code.length !== 6}
             isLoading={isVerifyingOTP}
             label={strings.commons.buttons.continue}
+            style={styles.authButton}
             onPress={() => verifyOTP(code)}
           />
         </Container>
@@ -181,6 +185,9 @@ export const OTPVerificationScreen = ({
 };
 
 const styles = StyleSheet.create({
+  authButton: {
+    height: moderateScale(AUTH_BUTTON_HEIGHT),
+  },
   screen: {
     flex: 1,
   },