useDeviceType
HookA React hook that returns the current device type based on screen width. Use it to conditionally render content or apply device-specific logic.
Why use this?
When you need to know the device type for conditional logic but don't need to render completely different components. Perfect for adjusting behavior, showing/hiding elements, or customizing content based on device category.
Basic Usage
Import the hook and call it in your component. It automatically updates when the screen size changes.
App.tsx
import { useDeviceType } from "@vincent-huy-uit/react-native-responsive-ui";
const device = useDeviceType();
// Returns: "mobile" | "tablet" | "desktop"Return Values
The hook returns one of three string values based on the current screen width.
| Value | Description |
|---|---|
"mobile" | Screen width < 768px (phones) |
"tablet" | Screen width ≥ 768px and < 1024px |
"desktop" | Screen width ≥ 1024px (web, large tablets) |