react-native-use-responsive

Production-ready React Native hooks — zero dependencies, TypeScript-first.

npm install react-native-use-responsive

Hooks

📱 Layout & Responsive

useBreakpoint(customBreakpoints?)

Detects screen size breakpoint (sm/md/lg/xl). Updates on rotation.

const bp = useBreakpoint();
const cols = bp === 'sm' ? 1 : bp === 'md' ? 2 : 3;

useResponsive(value)

Returns a breakpoint-aware value. Falls back to nearest smaller breakpoint.

const cols = useResponsive({ sm: 1, md: 2, lg: 3, xl: 4 });

useOrientation()

Returns 'portrait' or 'landscape'.

const orientation = useOrientation();

⌨️ Keyboard

useKeyboard()

Tracks keyboard visibility and height. iOS: keyboardWillShow/Hide, Android: keyboardDidShow/Hide.

const { visible, height } = useKeyboard();
return <View style={{ paddingBottom: visible ? height : 0 }} />;

📡 App State

useAppState()

Returns 'active' | 'background' | 'inactive'.

const state = useAppState();
if (state === 'background') pauseVideo();

useIsForeground()

Boolean — true when app is active.

const isActive = useIsForeground();

useOnForeground(callback)

Runs callback when app returns to foreground.

useOnForeground(() => refetchData());

⏱️ Timing

useDebounce(value, delay)

Debounces a value — updates after delay ms of inactivity.

const debouncedQuery = useDebounce(searchQuery, 300);

useThrottle(value, delay)

Throttles a value — updates at most once per delay ms.

const throttledY = useThrottle(scrollY, 100);

useInterval(callback, delay)

Declarative setInterval. Pass null to pause.

useInterval(() => setSeconds(s => s + 1), 1000);

🔧 Utilities

usePrevious(value)

Returns the previous value of a variable.

const prevCount = usePrevious(count);

useToggle(initial?)

Boolean toggle with [value, toggle, setValue].

const [isOn, toggle] = useToggle(false);

useMount(callback)

Runs once on mount.

useMount(() => analytics.track('screen_viewed'));

useUnmount(callback)

Runs once on unmount.

useUnmount(() => subscription.unsubscribe());

Full API

| Hook | Returns | Description | |------|---------|-------------| | useBreakpoint(cfg?) | 'sm' \| 'md' \| 'lg' \| 'xl' | Screen size breakpoint | | useResponsive(value, cfg?) | T | Breakpoint-aware value | | useOrientation() | 'portrait' \| 'landscape' | Device orientation | | useKeyboard() | { visible, height, duration } | Keyboard state | | useAppState() | AppStateStatus | App lifecycle state | | useIsForeground() | boolean | App is active | | useOnForeground(fn) | void | Callback on foreground | | useDebounce(value, ms) | T | Debounced value | | useThrottle(value, ms) | T | Throttled value | | usePrevious(value) | T \| undefined | Previous render value | | useInterval(fn, ms) | void | Declarative interval | | useToggle(initial?) | [bool, toggle, set] | Boolean toggle | | useMount(fn) | void | On mount callback | | useUnmount(fn) | void | On unmount callback |

License

MIT © Muhammad Suleman