Device APIs

import React, { useState, useEffect } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity, 
  StyleSheet, 
  Alert,
  Clipboard,
  Share,
  Vibration,
  Dimensions,
  Platform 
} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import NetInfo from '@react-native-community/netinfo';

const DeviceAPIs = () => {
  const [deviceInfo, setDeviceInfo] = useState({});
  const [networkInfo, setNetworkInfo] = useState({});
  const [batteryInfo, setBatteryInfo] = useState({});

  useEffect(() => {
    loadDeviceInfo();
    loadNetworkInfo();
    loadBatteryInfo();
  }, []);

  const loadDeviceInfo = async () => {
    try {
      const info = {
        deviceName: await DeviceInfo.getDeviceName(),
        systemName: DeviceInfo.getSystemName(),
        systemVersion: DeviceInfo.getSystemVersion(),
        model: DeviceInfo.getModel(),
        brand: DeviceInfo.getBrand(),
        buildNumber: DeviceInfo.getBuildNumber(),
        version: DeviceInfo.getVersion(),
        bundleId: DeviceInfo.getBundleId(),
        screenWidth: Dimensions.get('window').width,
        screenHeight: Dimensions.get('window').height,
        isTablet: DeviceInfo.isTablet(),
        hasNotch: DeviceInfo.hasNotch(),
      };
      setDeviceInfo(info);
    } catch (error) {
      console.log('Error loading device info:', error);
    }
  };

  const loadNetworkInfo = async () => {
    try {
      const netInfo = await NetInfo.fetch();
      setNetworkInfo({
        isConnected: netInfo.isConnected,
        type: netInfo.type,
        isInternetReachable: netInfo.isInternetReachable,
      });
    } catch (error) {
      console.log('Error loading network info:', error);
    }
  };

  const loadBatteryInfo = async () => {
    try {
      const batteryLevel = await DeviceInfo.getBatteryLevel();
      const isCharging = await DeviceInfo.isBatteryCharging();
      setBatteryInfo({
        level: Math.round(batteryLevel * 100),
        isCharging,
      });
    } catch (error) {
      console.log('Error loading battery info:', error);
    }
  };

  const copyToClipboard = async () => {
    const text = `Device: ${deviceInfo.deviceName}\nOS: ${deviceInfo.systemName} ${deviceInfo.systemVersion}\nModel: ${deviceInfo.model}`;
    await Clipboard.setString(text);
    Alert.alert('Success', 'Device info copied to clipboard');
  };

  const shareDeviceInfo = async () => {
    try {
      const text = `Check out my device: ${deviceInfo.deviceName} (${deviceInfo.systemName} ${deviceInfo.systemVersion})`;
      await Share.share({
        message: text,
        title: 'My Device Info',
      });
    } catch (error) {
      console.log('Error sharing:', error);
    }
  };

  const vibrateDevice = () => {
    if (Platform.OS === 'ios') {
      Vibration.vibrate();
    } else {
      Vibration.vibrate(1000);
    }
  };

  const refreshInfo = () => {
    loadDeviceInfo();
    loadNetworkInfo();
    loadBatteryInfo();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Device APIs</Text>
      
      <View style={styles.infoContainer}>
        <Text style={styles.infoTitle}>Device Information</Text>
        <Text style={styles.infoText}>Name: {deviceInfo.deviceName || 'Loading...'}</Text>
        <Text style={styles.infoText}>OS: {deviceInfo.systemName} {deviceInfo.systemVersion}</Text>
        <Text style={styles.infoText}>Model: {deviceInfo.model}</Text>
        <Text style={styles.infoText}>Brand: {deviceInfo.brand}</Text>
        <Text style={styles.infoText}>Screen: {deviceInfo.screenWidth} x {deviceInfo.screenHeight}</Text>
        <Text style={styles.infoText}>Tablet: {deviceInfo.isTablet ? 'Yes' : 'No'}</Text>
        <Text style={styles.infoText}>Has Notch: {deviceInfo.hasNotch ? 'Yes' : 'No'}</Text>
      </View>

      <View style={styles.infoContainer}>
        <Text style={styles.infoTitle}>Network Information</Text>
        <Text style={styles.infoText}>
          Connected: {networkInfo.isConnected ? '✅ Yes' : '❌ No'}
        </Text>
        <Text style={styles.infoText}>Type: {networkInfo.type || 'Unknown'}</Text>
        <Text style={styles.infoText}>
          Internet: {networkInfo.isInternetReachable ? '✅ Yes' : '❌ No'}
        </Text>
      </View>

      <View style={styles.infoContainer}>
        <Text style={styles.infoTitle}>Battery Information</Text>
        <Text style={styles.infoText}>
          Level: {batteryInfo.level ? `${batteryInfo.level}%` : 'Unknown'}
        </Text>
        <Text style={styles.infoText}>
          Charging: {batteryInfo.isCharging ? '✅ Yes' : '❌ No'}
        </Text>
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button} onPress={copyToClipboard}>
          <Text style={styles.buttonText}>📋 Copy Device Info</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.button} onPress={shareDeviceInfo}>
          <Text style={styles.buttonText}>📤 Share Device Info</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.button} onPress={vibrateDevice}>
          <Text style={styles.buttonText}>📳 Vibrate Device</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={[styles.button, styles.refreshButton]} onPress={refreshInfo}>
          <Text style={styles.buttonText}>🔄 Refresh Info</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333',
  },
  infoContainer: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 8,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  infoTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 15,
    textAlign: 'center',
  },
  infoText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 8,
  },
  buttonContainer: {
    gap: 15,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  refreshButton: {
    backgroundColor: '#4CAF50',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default DeviceAPIs;