Utilities

A collection of core libraries and utility functions pre-configured to speed up your development.

Core Libraries (src/lib)

Internationalization (i18n)

Built on top of i18next and react-i18next. It handles language detection, persistence, and RTL layout support automatically.

Features:

Auto-detects device language.
Persists user language preference using MMKV.
Supports RTL languages (Arabic, Hebrew, etc.) with layout forcing.

1import { translate } from "@/lib/i18n";
2import { useTranslation } from "react-i18next";
3
4// 1. Using the hook (Recommended for components)
5function Welcome() {
6  const { t } = useTranslation();
7  return <Text>{t("welcome.message")}</Text>;
8}
9
10// 2. Using the helper function (For non-component files)
11const title = translate("errors.network");

Environment Variables

Type-safe access to environment variables. The Env object is immutable and reads from ExpoConfig.extra.

1import { Env } from "@env";
2
3console.log(Env.API_URL);
4console.log(Env.APP_ENV); // 'development', 'staging', 'production'

Storage (MMKV)

High-performance synchronous storage using react-native-mmkv.

1import { setItem, getItem, removeItem } from "@/lib/utils/storage";
2
3// Async wrappers for convenience (handles JSON parsing)
4await setItem("user_settings", { theme: "dark" });
5const settings = await getItem("user_settings");
6await removeItem("user_settings");

Secure Storage

Encrypted storage for sensitive data like auth tokens. Uses expo-secure-store on native and falls back to `localStorage` on web (for development only).

1import { saveToken, getToken, deleteToken } from "@/lib/utils/secure-store";
2
3// Specific helpers for Auth Token
4await saveToken("access-token-123");
5const token = await getToken();
6await deleteToken();
7
8// Generic secure item
9import { setSecureItem, getSecureItem } from "@/lib/utils/secure-store";
10await setSecureItem("api_key", "secret_key");

Currency Formatting

Formats numbers into currency strings based on locale.

1import { formatCurrency } from "@/lib/utils/format-currency";
2
3// Defaults to NGN (Naira)
4formatCurrency(5000); // "₦5,000.00"
5
6// Custom currency
7formatCurrency(1250.50, "USD", "en-US"); // "$1,250.50"

Error Extraction

Recursively parses complex error objects (often from backend validation) into a single readable string.

1import { extractError } from "@/lib/utils/extract-error";
2
3const apiError = {
4  errors: {
5    email: ["Invalid email format"],
6    password: ["Too short"]
7  }
8};
9
10const message = extractError(apiError);
11// Output: "- email: Invalid email format 
12 - password: Too short 
13"

App Rating

Prompts the user to rate the app using native Store Review dialogs. Falls back to opening the Store URL if native review is unavailable.

1import { rateApp } from "@/lib/utils/rate-app";
2
3// Call this after a positive user interaction
4await rateApp();

Blurhash

Generates a blurhash string from an image URI for showing loading placeholders.

1import { generateBlurhash } from "@/lib/utils/blurhash";
2
3const hash = await generateBlurhash('file:///path/to/image.jpg');
4// Use this hash with <Image placeholder={hash} />

UI Utilities (src/components/utilities)

ShowToast

A wrapper around sonner-native to provide a consistent, type-safe API for displaying toast notifications. It includes preset defaults for duration and positioning.

1import { ShowToast } from "@/components/utilities";
2
3// Success
4ShowToast.success("Profile Updated", "Your changes have been saved.");
5
6// Error
7ShowToast.error("Failed", { description: "Could not connect to server." });
8
9// Loading
10const id = ShowToast.loading("Uploading...");
11// ... later
12ShowToast.dismiss(id);
13
14// Custom Configuration
15ShowToast.setDefaults({ position: 'bottom-center' });

Confirm Dialog

An imperative API to show a confirmation dialog using the toast system. Useful for quick "Are you sure?" prompts without managing local state for modals.

1import { confirmDialog } from "@/components/utilities";
2
3const handleDelete = () => {
4  confirmDialog({
5    title: "Delete Account?",
6    description: "This action cannot be undone.",
7    variant: "destructive", // changes styling to red/danger
8    confirmLabel: "Delete",
9    onConfirm: async () => {
10      await deleteAccount();
11    },
12    onCancel: () => console.log("Cancelled")
13  });
14};

Platform & Layout

Constants for platform detection and screen dimensions.

1import { IS_IOS, IS_ANDROID, WIDTH, HEIGHT } from "@/components/utilities/ui-utils";
2
3if (IS_IOS) {
4  // iOS specific logic
5}
6
7const halfScreen = WIDTH / 2;

Colors

The colors.js file acts as the source of truth for the design system's color palette. It is used in both the Tailwind configuration and runtime code.

1// src/components/utilities/colors.js
2module.exports = {
3  primary: {
4    500: "#FF7B1A",
5    // ...
6  },
7  neutral: {
8    // ...
9  }
10};
11
12// Usage in Tailwind config
13// theme: { extend: { colors: require('./src/components/utilities/colors') } }