Hooks

A collection of custom React hooks to simplify common tasks. Located in src/hooks.

useCountdown

Manages a countdown timer with start, stop, and reset functionality. Useful for OTP inputs or temporary access tokens.

1import { useCountdown } from "@/hooks";
2
3const { seconds, isActive, start, stop, reset } = useCountdown({
4  initialSeconds: 30,
5  onComplete: () => console.log("Done!"),
6});
7
8// Start the timer
9start(); 
10
11// Display
12<Text>{seconds}s remaining</Text>

useDebounce

Debounces a value by a specified delay. Essential for search inputs to avoid making API calls on every keystroke.

1import { useDebounce } from "@/hooks";
2import { useState, useEffect } from "react";
3
4const [search, setSearch] = useState("");
5const debouncedSearch = useDebounce(search, 500);
6
7useEffect(() => {
8  // Only runs 500ms after the user stops typing
9  if (debouncedSearch) {
10    performSearch(debouncedSearch);
11  }
12}, [debouncedSearch]);

useIsFirstTime

A persistent boolean hook that tracks if the user is opening the app for the first time. Uses MMKV for storage. Great for showing onboarding screens.

1import { useIsFirstTime } from "@/hooks";
2
3const [isFirstTime, setIsFirstTime] = useIsFirstTime();
4
5if (isFirstTime) {
6  return <Onboarding onComplete={() => setIsFirstTime(false)} />;
7}

useSelectedTheme

Manages the user's explicit theme preference (light, dark, or system). It persists the choice and updates the native appearance.

1import { useSelectedTheme } from "@/hooks";
2
3const { selectedTheme, setSelectedTheme } = useSelectedTheme();
4
5// Switch to dark mode
6setSelectedTheme("dark");
7
8// Reset to system default
9setSelectedTheme("system");

useTheme

Returns the active React Navigation theme object based on the current configuration. It resolves the conflict between system settings and user preference.

1import { useTheme } from "@/hooks";
2import { NavigationContainer } from "@react-navigation/native";
3
4export default function RootNavigator() {
5  const theme = useTheme();
6
7  return (
8    <NavigationContainer theme={theme}>
9      {/* ... */}
10    </NavigationContainer>
11  );
12}