import { useDevices } from '@ray-js/panel-sdk';

function DeviceOnlineStatus() {
  // Whether the device is online depends on devInfo.isOnline; re-renders only when the main device's online status changes
  const isOnline = useDevices(devices => devices.main?.devInfo?.isOnline);
  return <Text>Device online: {isOnline ? 'Yes' : 'No'}</Text>;
}

import { useDevices } from '@ray-js/panel-sdk';

function PhoneNetworkStatus() {
  // network reflects the current phone's network environment (shared by all devices), not a specific device's online status
  const network = useDevices(devices => devices.main?.network);
  return (
    <Text>
      Network: {network?.networkType} ({network?.isConnected ? 'Connected' : 'Disconnected'})
    </Text>
  );
}

import { useDevices } from '@ray-js/panel-sdk';

function PhoneNetworkStatus() {
  // Only updates when the phone's network connection status actually changes; jitter in networkType/signal strength won't trigger re-render
  const network = useDevices(
    devices => devices.main?.network,
    (prev, next) => prev?.isConnected === next?.isConnected
  );
  return <Text>Network connected: {network?.isConnected ? 'Yes' : 'No'}</Text>;
}

import { useDevices } from '@ray-js/panel-sdk';

function DeviceList() {
  const allDevices = useDevices();
  return (
    <View>
      {Object.entries(allDevices).map(([key, data]) => (
        <Text key={key}>{data.devInfo.name}</Text>
      ))}
    </View>
  );
}