Use and adapt use-device
Use and adapt use-device: Reactive Expo hook for window, platform, locale, direction, and color scheme
Use the documented interfaces and source layout for use-device. The sections below retain the README’s examples and configuration details.
Use
import { Text, View } from 'react-native';
import { useDevice } from '@kyna-code/use-device';
export function EnvironmentSummary() {
const device = useDevice();
return (
<View>
<Text>{device.width} × {device.height}</Text>
<Text>{device.platform}</Text>
<Text>{device.languageTag}</Text>
<Text>{device.theme}</Text>
</View>
);
}The returned snapshot updates when the app window, font scale, system theme, or
locale changes. width and height are the app-window dimensions in logical
pixels, not the physical screen size, so they behave correctly with split-screen
and resizable web or desktop windows.
App-specific decisions—such as breakpoints, supported interface languages, and theme color tokens—belong in the consuming app and can be derived from this hook.
Returned values
- Window:
width,height,scale,fontScale,portrait,landscape - Platform:
platform,ios,android,web,native - Theme:
colorScheme,theme,dark,light - Locale:
locales,languageTag,languageCode,regionCode,textDirection,rtl
Commands in the root manifest
The captured package.json declares the following scripts. Run them from the directory containing that manifest.
| Command | Script |
|---|---|
npm run build | tsup src/index.ts --format esm,cjs --dts --clean |
npm run typecheck | tsc --noEmit |
Troubleshoot a local change
- Reproduce the smallest example from the quick-start guide.
- Compare required configuration and dependency versions with the README.
- Check the linked issue tracker for the same error. Include the command, runtime version, and relevant error when reporting a problem; omit credentials.
Source and help
The catalog identifies the license as MIT. Read the repository license before redistributing source or assets.
Source captured: 2026-10-11