@bigbinary/neeto-commons-rn 2.0.3 → 2.1.0

package/src/api/app_version.ts

@@ -1,6 +1,12 @@
+import { type NotifiableError } from "@bugsnag/react-native";
 import axios from "axios";
 import Config from "react-native-config";
 
+import { bugsnagErrorHandler } from "../config/bugsnag";
+import {
+  APP_VERSION_ERROR_GROUPING_HASH,
+  APP_VERSION_ERROR_REPORT_INTERVAL,
+} from "../constants";
 import { Store } from "../store";
 import { appVersionsUrl } from "../utils/apiHelpers";
 
@@ -10,13 +16,47 @@ export interface AppVersionInfo {
   [key: string]: unknown;
 }
 
-const fetch = () => {
+// The version check deliberately does not use the app's axios instance: those
+// interceptors attach auth headers, convert cases and show the user a toast,
+// which an advisory background poll has no business doing. The timeout keeps a
+// stalled origin from holding the request open indefinitely.
+const client = axios.create({ timeout: 8000 });
+
+let lastFailureReportedAt = 0;
+
+// Reported, but rationed: the endpoint is hit on every launch by every install,
+// so an outage would otherwise arrive as thousands of identical events. One
+// event per hour per session, all under a single grouping hash. Offline devices
+// are dropped by bugsnagErrorHandler's own network-error check.
+const reportFailure = (error: unknown) => {
+  const now = Date.now();
+
+  if (now - lastFailureReportedAt < APP_VERSION_ERROR_REPORT_INTERVAL) return;
+
+  lastFailureReportedAt = now;
+
+  bugsnagErrorHandler(
+    error as NotifiableError,
+    "app_version_check_failed",
+    APP_VERSION_ERROR_GROUPING_HASH
+  );
+};
+
+const fetch = async () => {
   // `String` keeps the pre-TypeScript behaviour for an unset appName, where
   // template interpolation produced the literal "null" in the URL.
   const appName = String(Store.getState().auth.appName);
   const environment = Config.ENVIRONMENT === "staging" ? "net" : "com";
 
-  return axios.get<AppVersionInfo>(appVersionsUrl({ appName, environment }));
+  try {
+    return await client.get<AppVersionInfo>(
+      appVersionsUrl({ appName, environment })
+    );
+  } catch (error) {
+    reportFailure(error);
+
+    throw error;
+  }
 };
 
 const appVersionApi = { fetch };

package/src/components/AppVersion.ts

@@ -2,12 +2,13 @@ import { useEffect, useState } from "react";
 import { AppState, Linking, Platform } from "react-native";
 
 import { Alert } from "@bigbinary/neetoui-rn";
-import { compare } from "compare-versions";
+import { compare, validate } from "compare-versions";
 import Config from "react-native-config";
 import { getVersion } from "react-native-device-info";
 
 import {
   ANDROID_APP_LINK,
+  APP_VERSION_RECHECK_INTERVAL,
   IOS_PROD_APP_LINK,
   IOS_STAGING_APP_LINK,
 } from "./constants";
@@ -36,7 +37,11 @@ export const AppVersion = () => {
 
   const appName = Store.getState().auth.appName;
 
-  const { data: appVersionData, refetch } = useFetchAppVersionApi();
+  const {
+    data: appVersionData,
+    refetch,
+    dataUpdatedAt,
+  } = useFetchAppVersionApi();
   const data = (appVersionData ?? {}) as AppVersionPayload;
 
   const iOSAppLink =
@@ -59,31 +64,36 @@ export const AppVersion = () => {
     }
   };
 
+  // The endpoint is advisory. A failure or a malformed payload must leave the
+  // app fully usable and show nothing at all, so anything that is not a pair
+  // of comparable versions is dropped without a prompt — `compare` throws on
+  // invalid semver, and this runs from an effect where a throw would take the
+  // screen down with it.
   const compareVersions = () => {
-    if (Platform.OS === "android") {
-      const {
-        android_minimum_supported_version: androidMinimumSupportedVersion,
-        android_current_version: androidCurrentVersion,
-      } = data;
-      if (androidMinimumSupportedVersion && androidCurrentVersion) {
-        if (compare(getVersion(), androidMinimumSupportedVersion, "<")) {
-          setIsMajorUpdate(true);
-        } else if (compare(getVersion(), androidCurrentVersion, "<")) {
-          setIsMinorUpdate(true);
-        }
-      }
-    } else {
-      const {
-        ios_minimum_supported_version: iOSMinimumSupportedVersion,
-        ios_current_version: iOSCurrentVersion,
-      } = data;
-      if (iOSMinimumSupportedVersion && iOSCurrentVersion) {
-        if (compare(getVersion(), iOSMinimumSupportedVersion, "<")) {
-          setIsMajorUpdate(true);
-        } else if (compare(getVersion(), iOSCurrentVersion, "<")) {
-          setIsMinorUpdate(true);
-        }
-      }
+    const isAndroid = Platform.OS === "android";
+
+    const minimumSupportedVersion = isAndroid
+      ? data.android_minimum_supported_version
+      : data.ios_minimum_supported_version;
+
+    const currentVersion = isAndroid
+      ? data.android_current_version
+      : data.ios_current_version;
+
+    const installedVersion = getVersion();
+
+    const isComparable = [
+      installedVersion,
+      minimumSupportedVersion,
+      currentVersion,
+    ].every(version => !!version && validate(version));
+
+    if (!isComparable) return;
+
+    if (compare(installedVersion, minimumSupportedVersion as string, "<")) {
+      setIsMajorUpdate(true);
+    } else if (compare(installedVersion, currentVersion as string, "<")) {
+      setIsMinorUpdate(true);
     }
   };
 
@@ -142,13 +152,19 @@ export const AppVersion = () => {
 
   useEffect(() => {
     const subscription = AppState.addEventListener("change", state => {
-      if (state === "active") {
-        refetch();
-      }
+      if (state !== "active") return;
+
+      // `refetch` ignores staleTime, so an agent flipping between apps used to
+      // re-poll app_versions on every single foreground. `dataUpdatedAt` is 0
+      // until the first response lands, which still lets that first check run.
+      const isCheckDue =
+        Date.now() - dataUpdatedAt >= APP_VERSION_RECHECK_INTERVAL;
+
+      if (isCheckDue) refetch();
     });
 
     return () => subscription.remove();
-  }, []);
+  }, [dataUpdatedAt, refetch]);
 
   return null;
 };

package/src/components/DevToolsBridge.ts

@@ -0,0 +1,40 @@
+import { createElement } from "react";
+
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useNetworkActivityDevTools } from "@rozenite/network-activity-plugin";
+import {
+  createAsyncStorageAdapter,
+  useRozeniteStoragePlugin,
+} from "@rozenite/storage-plugin";
+import { useTanStackQueryDevTools } from "@rozenite/tanstack-query-plugin";
+import { type QueryClient } from "@tanstack/react-query";
+
+// The TanStack hook cannot run without a client, and hooks cannot be called
+// conditionally — so the query panel lives in its own component that only
+// mounts when the host passed its client.
+const TanStackQueryDevTools = ({
+  queryClient,
+}: {
+  queryClient: QueryClient;
+}) => {
+  useTanStackQueryDevTools(queryClient);
+
+  return null;
+};
+
+// Null-rendering host for the Rozenite device-side hooks. This module must
+// only ever be required from inside an `if (__DEV__)` block (see
+// NeetoCommonsRNProvider) so metro's dead-code elimination keeps it — and
+// the plugin packages — out of release bundles.
+const DevToolsBridge = ({ queryClient }: { queryClient?: QueryClient }) => {
+  useNetworkActivityDevTools();
+  useRozeniteStoragePlugin({
+    storages: [createAsyncStorageAdapter({ storage: AsyncStorage })],
+  });
+
+  return queryClient
+    ? createElement(TanStackQueryDevTools, { queryClient })
+    : null;
+};
+
+export default DevToolsBridge;

package/src/components/Header.tsx

@@ -1,6 +1,8 @@
 import React, { useState, type ComponentType } from "react";
 
-import { HamburgerMenu, MenuVertical, Search } from "@bigbinary/neeto-icons-rn";
+import HamburgerMenu from "@bigbinary/neeto-icons-rn/icons/HamburgerMenu";
+import MenuVertical from "@bigbinary/neeto-icons-rn/icons/MenuVertical";
+import Search from "@bigbinary/neeto-icons-rn/icons/Search";
 import {
   Avatar,
   BottomSheetMenu,

package/src/components/NotificationIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleSheet } from "react-native";
 
-import { Notification } from "@bigbinary/neeto-icons-rn";
+import Notification from "@bigbinary/neeto-icons-rn/icons/Notification";
 import {
   Container,
   Touchable,

package/src/components/ToggleSwitch.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef } from "react";
 import { Animated, StyleSheet } from "react-native";
 
-import { Check, Close } from "@bigbinary/neeto-icons-rn";
+import Check from "@bigbinary/neeto-icons-rn/icons/Check";
+import Close from "@bigbinary/neeto-icons-rn/icons/Close";
 import { Container, Touchable, lightTheme } from "@bigbinary/neetoui-rn";
 
 import { TOGGLE_ANIMATION_DURATION, TOGGLE_KNOB_TRAVEL } from "./constants";

package/src/components/WorkspaceSwitcherPane.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { SafeAreaView, StyleSheet } from "react-native";
 
-import { Close } from "@bigbinary/neeto-icons-rn";
+import Close from "@bigbinary/neeto-icons-rn/icons/Close";
 import {
   Container,
   FlashList,

package/src/components/constants.ts

@@ -8,6 +8,10 @@ export const IOS_PROD_APP_LINK = `https://apps.apple.com/us/app/${Config.IOS_APP
 
 export const IOS_STAGING_APP_LINK = `https://testflight.apple.com/v1/app/${Config.IOS_APP_ID}`;
 
+// Foreground re-checks of app_versions are throttled to this window. A
+// published version moves at release cadence, not at app-switch cadence.
+export const APP_VERSION_RECHECK_INTERVAL = 30 * 60 * 1000;
+
 // ToggleSwitch knob travel and animation.
 export const TOGGLE_KNOB_TRAVEL = moderateScale(24);
 export const TOGGLE_ANIMATION_DURATION = 300;

package/src/config/axios/constants.ts

@@ -4,6 +4,9 @@ import { type CaseConversionOptions } from "./types";
 
 export const DEFAULT_CASE_CONVERSION = Config.ENABLE_CASE_CONVERSION === "true";
 
+export const UUID_SEGMENT =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
 export const shouldEnableCaseConversion = (
   options: CaseConversionOptions = {}
 ) => {

package/src/config/axios/groupingKey.ts

@@ -0,0 +1,25 @@
+import { UUID_SEGMENT } from "./constants";
+
+const isIdSegment = (segment: string) =>
+  /^\d+$/.test(segment) || UUID_SEGMENT.test(segment);
+
+/**
+ * Collapses a request URL to its route shape for Bugsnag grouping: ids become
+ * `:id` and the query string is dropped.
+ *
+ * A 403 on ticket 2732 and a 403 on ticket 2698 are one bug, but grouping on
+ * the raw URL files them as separate errors — and a list endpoint whose filters
+ * ride in the query string ends up naming its group with ~900 characters of
+ * encoded params. The exact URL is still reported under
+ * `axios_error_details.requestUrl`, so nothing is lost by grouping on the shape.
+ */
+export const normalizeUrlForGrouping = (url?: string) => {
+  if (!url) return "";
+
+  const [path] = url.split("?");
+
+  return path
+    .split("/")
+    .map(segment => (isIdSegment(segment) ? ":id" : segment))
+    .join("/");
+};

package/src/config/axios/index.ts

@@ -11,6 +11,7 @@ import Config from "react-native-config";
 import DeviceInfo from "react-native-device-info";
 
 import { convertRequestKeys, convertResponseKeys } from "./caseConversion";
+import { normalizeUrlForGrouping } from "./groupingKey";
 import { handleNetworkError } from "./networkErrorHandler";
 import setParamsSerializer from "./paramsSerializer";
 
@@ -203,10 +204,12 @@ const registerResponseIntercept = () => {
               responseData: filterSensitiveData(response?.data),
             });
 
-            report.context = `Axios Request Failed: ${config?.method?.toUpperCase()} ${
-              config?.url
-            }`;
-            report.groupingHash = `axios-${config?.method}-${config?.url}`;
+            // Group by route shape, not by the resource that happened to
+            // fail — the raw URL is above in `requestUrl`.
+            const route = normalizeUrlForGrouping(config?.url);
+
+            report.context = `Axios Request Failed: ${config?.method?.toUpperCase()} ${route}`;
+            report.groupingHash = `axios-${config?.method}-${route}`;
           });
         } catch (bugsnagError) {
           // eslint-disable-next-line no-console

package/src/config/bugsnag.ts

@@ -8,7 +8,13 @@ import {
 
 import { Store } from "../store";
 
-export const bugsnagErrorHandler = (err: NotifiableError, origin: string) => {
+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
+) => {
   if (!__DEV__) {
     Bugsnag.notify(err, event => {
       if (isNetworkError(err)) {
@@ -18,6 +24,10 @@ export const bugsnagErrorHandler = (err: NotifiableError, origin: string) => {
       event.severity = "warning";
       event.context = origin;
 
+      if (groupingHash) {
+        event.groupingHash = groupingHash;
+      }
+
       return true;
     });
   }

package/src/constants/index.ts

@@ -7,3 +7,16 @@ export const STORAGE_KEYS = {
 } as const;
 
 export const DEFAULT_PAGE_SIZE = 30;
+
+/**
+ * A failing app_versions endpoint affects every launch of every install, so it
+ * is reported at most once per window per session — enough to see the outage
+ * and its trend, not enough to bury the rest of the project.
+ */
+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";
+
+/** Design baseline: a ~5" phone, the width every scaled size was drawn against. */
+export const GUIDELINE_BASE_WIDTH = 350;

package/src/contexts/localization.tsx

@@ -8,7 +8,7 @@ import React, {
   type ReactNode,
 } from "react";
 
-import { mergeDeepRight } from "ramda";
+import mergeDeepRight from "ramda/src/mergeDeepRight";
 
 import { getItem, setItem } from "../helpers/asyncStore";
 import {

package/src/helpers/notifications/firebaseMessaging.android.ts

@@ -0,0 +1,21 @@
+import firebaseMessaging, {
+  getInitialNotification,
+  getMessaging,
+  type FirebaseMessagingTypes,
+} from "@react-native-firebase/messaging";
+
+/**
+ * Android build of the Firebase seam — the only module in the package that
+ * names @react-native-firebase. See firebaseMessaging.ts for why the import
+ * cannot simply sit behind a platform check.
+ */
+// Annotated rather than inferred: declaration emit cannot name the inferred
+// type without reaching into the package's own dist path.
+export const messaging: typeof firebaseMessaging = firebaseMessaging;
+
+/** The notification that launched the app from a killed state, or null. */
+export const getInitialFirebaseNotification =
+  (): Promise<FirebaseMessagingTypes.RemoteMessage | null> =>
+    // Modular API: the namespaced messaging().getInitialNotification() logs a
+    // deprecation warning on every cold start and goes away in the next major.
+    getInitialNotification(getMessaging());

package/src/helpers/notifications/firebaseMessaging.ts

@@ -0,0 +1,37 @@
+// Type-only, and it must stay that way: a value import here would defeat the
+// entire module. The statement form says so at a glance.
+import type {
+  default as firebaseMessaging,
+  FirebaseMessagingTypes,
+} from "@react-native-firebase/messaging";
+
+/**
+ * iOS/default build of the Firebase seam. Firebase is linked on Android only
+ * (react-native.config.js sets `platforms.ios = null`), so on iOS there is no
+ * RNFBAppModule — and @react-native-firebase/app constructs a native event
+ * emitter over it at *module scope*:
+ *
+ *   export default new RNFBNativeEventEmitter();
+ *
+ * which throws "Native module RNFBAppModule not found" the moment anything
+ * imports the package. A `Platform.OS === "android"` guard around the call
+ * does not help: the import has already run. Every Firebase import therefore
+ * goes through this module, whose .android build is the only one that
+ * mentions the package.
+ */
+
+/** Never reached on iOS — every caller is behind a platform check. */
+export const messaging = (() => {
+  throw new Error(
+    "Firebase messaging is Android-only in neeto apps; iOS uses APNs directly."
+  );
+}) as unknown as typeof firebaseMessaging;
+
+/**
+ * The notification that launched the app from a killed state, or null. iOS
+ * has none to report: an APNs alert push is displayed by the OS and arrives
+ * through notify-kit, not Firebase.
+ */
+export const getInitialFirebaseNotification =
+  (): Promise<FirebaseMessagingTypes.RemoteMessage | null> =>
+    Promise.resolve(null);

package/src/helpers/notifications/getDeviceToken.ts

@@ -1,8 +1,7 @@
 import { Platform } from "react-native";
 
-import messaging from "@react-native-firebase/messaging";
-
 import { getAPNSToken } from "./apnsToken";
+import { messaging } from "./firebaseMessaging";
 
 // iOS keeps the historical APNs-direct backend contract with no Firebase at
 // all — the raw APNs token comes from the NeetoAPNSToken native module.

package/src/helpers/notifications/index.ts

@@ -1,3 +1,4 @@
 export { usePushNotification } from "./usePushNotification";
 export { registerBackgroundHandlers } from "./registerBackgroundHandlers";
 export { NOTIFICATION_CHANNELS, NOTIFICATION_CHANNEL_IDS } from "./constants";
+export { getInitialFirebaseNotification } from "./firebaseMessaging";

package/src/helpers/notifications/registerBackgroundHandlers.ts

@@ -1,9 +1,9 @@
 import { Platform } from "react-native";
 
-import messaging from "@react-native-firebase/messaging";
 import dayjs from "dayjs";
 import notifee, { EventType } from "react-native-notify-kit";
 
+import { messaging } from "./firebaseMessaging";
 import { type NotificationPressHandler } from "./types";
 
 import { markReadUnReadNotificationAPI } from "../../api/notifications";

package/src/helpers/notifications/usePushNotification.ts

@@ -1,12 +1,12 @@
 import { useEffect, useCallback, useState } from "react";
 import { Platform } from "react-native";
 
-import messaging from "@react-native-firebase/messaging";
 import dayjs from "dayjs";
 import notifee, { EventType } from "react-native-notify-kit";
 import { RESULTS, checkNotifications } from "react-native-permissions";
 
 import { NOTIFICATION_CHANNELS } from "./constants";
+import { messaging } from "./firebaseMessaging";
 import { getDeviceToken } from "./getDeviceToken";
 import {
   type NotificationPressHandler,

package/src/helpers/scale.ts

@@ -1,4 +1,22 @@
-import { moderateScale as baseModerateScale } from "react-native-size-matters";
+import { UnistylesRuntime } from "react-native-unistyles";
 
-export const moderateScale = (size: number, factor?: number) =>
-  Math.round(baseModerateScale(size, factor));
+import { GUIDELINE_BASE_WIDTH } from "../constants";
+
+/**
+ * react-native-size-matters' formula, read off the unistyles runtime instead
+ * of a Dimensions value captured at module load — that snapshot never updated
+ * for split-screen, foldables or iPad Slide Over. Reading `rt.screen` inside a
+ * unistyles StyleSheet also subscribes that sheet to window resizes.
+ *
+ * The short edge is used, so a size scales the same in either orientation, and
+ * it falls back to the baseline before unistyles has measured (its jest mock
+ * reports 0x0), leaving sizes untouched.
+ */
+export const moderateScale = (size: number, factor = 0.5) => {
+  const { width, height } = UnistylesRuntime.screen;
+  const shortDimension = Math.min(width, height) || GUIDELINE_BASE_WIDTH;
+
+  return Math.round(
+    size + ((shortDimension / GUIDELINE_BASE_WIDTH) * size - size) * factor
+  );
+};

package/src/helpers/utils.ts

@@ -1,7 +1,8 @@
 import { Linking } from "react-native";
 
 import { isNotPresent } from "@bigbinary/neeto-cist";
-import { equals, intersection } from "ramda";
+import equals from "ramda/src/equals";
+import intersection from "ramda/src/intersection";
 import Config from "react-native-config";
 
 // eslint-disable-next-line no-console

package/src/hooks/query/useAppVersionApi.ts

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { type AxiosError } from "axios";
 
 import { queryKeys } from "./queryKeys";
 
@@ -9,4 +10,12 @@ export const useFetchAppVersionApi = () =>
     queryKey: [queryKeys.APP_VERSION],
     queryFn: appVersionApi.fetch,
     select: ({ data }) => data,
+    // An update banner is not worth hammering a struggling endpoint with the
+    // default three attempts: one retry, and none at all on a gateway timeout,
+    // where the upstream has already reported itself down.
+    retry: (failureCount, error) =>
+      (error as AxiosError)?.response?.status === 504
+        ? false
+        : failureCount < 1,
+    retryDelay: 2000,
   });

package/src/hooks/query/useRolesApi.ts

@@ -1,5 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import { groupBy, prop, reverse } from "ramda";
+import groupBy from "ramda/src/groupBy";
+import prop from "ramda/src/prop";
+import reverse from "ramda/src/reverse";
 
 import { queryKeys } from "./queryKeys";
 

package/src/providers/NeetoCommonsRNProvider.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 
 import { type NavigationContainerRef } from "@react-navigation/native";
+import { type QueryClient } from "@tanstack/react-query";
 import { Provider } from "react-redux";
 import { type Reducer } from "redux";
 import { PersistGate } from "redux-persist/integration/react";
@@ -25,6 +26,20 @@ import { updateRootReducer } from "../store/utils";
 
 initializeConfigs();
 
+// Same module-level __DEV__ gate as the store's Rozenite enhancer: metro
+// inlines __DEV__ and strips the require — and the plugin packages behind
+// it — from release bundles before dependency collection. The try/catch
+// keeps hosts working if the plugins are ever absent.
+let DevToolsBridge: React.ComponentType<{ queryClient?: QueryClient }> | null =
+  null;
+if (__DEV__) {
+  try {
+    DevToolsBridge = require("../components/DevToolsBridge").default;
+  } catch {
+    DevToolsBridge = null;
+  }
+}
+
 export interface NeetoCommonsRNProviderProps {
   appName: string;
   hostNavigationRef?: React.RefObject<NavigationContainerRef<
@@ -33,6 +48,12 @@ export interface NeetoCommonsRNProviderProps {
   hostStrings?: HostStrings;
   hostRootReducer: Record<string, Reducer>;
   blacklistedReducers?: string[];
+  /**
+   * The host app's react-query client. Dev-only: when provided, the
+   * Rozenite TanStack Query DevTools panel streams this client's cache.
+   * Network and Storage panels work without it.
+   */
+  queryClient?: QueryClient;
   children?: ReactNode;
 }
 
@@ -42,6 +63,7 @@ export const NeetoCommonsRNProvider = ({
   hostStrings,
   hostRootReducer,
   blacklistedReducers,
+  queryClient,
   children,
 }: NeetoCommonsRNProviderProps) => {
   const prevReducersRef = useRef<Record<string, Reducer> | null>(null);
@@ -69,6 +91,7 @@ export const NeetoCommonsRNProvider = ({
     <Provider store={Store}>
       <PersistGate loading={null} persistor={Persistor}>
         <LocalizationProvider hostStrings={hostStrings}>
+          {DevToolsBridge ? <DevToolsBridge queryClient={queryClient} /> : null}
           {children}
         </LocalizationProvider>
       </PersistGate>

package/src/screens/authentication/IncompleteOnboardingInfo.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from "react";
 import { Linking, StyleSheet } from "react-native";
 
+import Left from "@bigbinary/neeto-icons-rn/icons/Left";
 import {
   Container,
   ParentView,
@@ -9,7 +10,6 @@ import {
   lightTheme,
 } from "@bigbinary/neetoui-rn";
 import Config from "react-native-config";
-import Icon from "react-native-remix-icon";
 
 import { HyperlinkText } from "../../components/HyperlinkText";
 import { useLocalization } from "../../contexts/localization";
@@ -64,7 +64,7 @@ export const IncompleteOnboardingInfo = ({
           style={styles.backButton}
           onPress={onBackPress}
         >
-          <Icon name="arrow-left-s-line" size={moderateScale(24)} />
+          <Left size={moderateScale(24)} />
         </Touchable>
       </Container>
       <Container style={styles.body}>