Skip to main content

@54vie/device - Device Utilities

Module providing device information and related utilities.

Installation​

pnpm add @54vie/device

Device Info​

import { DeviceInfo, useDeviceInfo } from '@54vie/device';

// Hook
function MyComponent() {
  const {
    model,        // "iPhone 15 Pro"
    brand,        // "Apple"
    os,           // "ios" | "android"
    osVersion,    // "17.0"
    appVersion,   // "1.0.0"
    buildNumber,  // "100"
    deviceId,     // Unique device ID
    isEmulator,   // Boolean
    isTablet,     // Boolean
    hasNotch,     // Boolean
  } = useDeviceInfo();
}

// Direct
const model = DeviceInfo.getModel();
const deviceId = await DeviceInfo.getDeviceId();
const isEmulator = await DeviceInfo.isEmulator();
const all = await DeviceInfo.getAll();

Network Status​

import { useNetwork, NetworkMonitor } from '@54vie/device';

// Hook
function MyComponent() {
  const {
    isConnected,
    type,              // 'wifi' | 'cellular' | 'none'
    isWifi,
    isCellular,
    cellularGeneration, // '4g' | '5g' | null
    isInternetReachable,
  } = useNetwork();

  if (!isConnected) {
    return <OfflineMessage />;
  }
}

// Direct
const isOnline = await NetworkMonitor.isOnline();
const type = await NetworkMonitor.getConnectionType();

// Listen to changes
const unsubscribe = NetworkMonitor.addEventListener('network', (state) => {
  console.log('Network changed:', state);
});

App State​

import { useAppState, AppStateManager } from '@54vie/device';

function MyComponent() {
  const { state, isActive, isBackground } = useAppState();

  useEffect(() => {
    if (isActive) {
      // App came to foreground
      refreshData();
    }
  }, [isActive]);
}

// Callbacks
const { onForeground, onBackground } = useAppState();

onForeground(() => {
  console.log('App is active');
});

onBackground(() => {
  console.log('App went to background');
});

Keyboard​

import { useKeyboard } from '@54vie/device';

function ChatInput() {
  const { isVisible, height, dismiss } = useKeyboard();

  return (
    <View style={{ marginBottom: isVisible ? height : 0 }}>
      <TextInput />
      {isVisible && (
        <Button onPress={dismiss}>Done</Button>
      )}
    </View>
  );
}

Screen & Orientation​

import { useScreen, useOrientation } from '@54vie/device';

function ResponsiveComponent() {
  const { width, height, scale, safeAreaInsets } = useScreen();
  const { orientation, lock, unlock } = useOrientation();

  // Lock to portrait
  useEffect(() => {
    lock('portrait');
    return () => unlock();
  }, []);

  return (
    <View style={{
      paddingTop: safeAreaInsets.top,
      flexDirection: orientation === 'landscape' ? 'row' : 'column',
    }}>
      {/* Content */}
    </View>
  );
}

Battery​

import { useBattery } from '@54vie/device';

function BatteryIndicator() {
  const { level, isCharging, isLowPower } = useBattery();

  return (
    <View>
      <Text>Battery: {Math.round(level * 100)}%</Text>
      {isCharging && <Icon name="bolt" />}
      {isLowPower && <Text>Low Power Mode</Text>}
    </View>
  );
}

Haptics​

import { Haptics } from '@54vie/device';

// Impact feedback
Haptics.impact('light');   // light, medium, heavy

// Notification feedback
Haptics.notification('success');  // success, warning, error

// Selection feedback
Haptics.selection();

Clipboard​

import { Clipboard } from '@54vie/device';

// Copy
await Clipboard.setString('Hello');

// Paste
const text = await Clipboard.getString();

// Check
const hasContent = await Clipboard.hasString();