Add device info (#9)

### Added device info menu for the expo project

Author: YosefAshenafi

.editorconfig

@@ -0,0 +1,58 @@
+# http://editorconfig.org
+# Properties: https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+
+# Use 2 spaces for the HTML files
+[*.{html,svg}]
+indent_size = 2
+
+[*.{js,jsx,ts,tsx}]
+indent_size = 4
+quote_type = single
+curly_bracket_next_line = false
+spaces_around_operators = true
+spaces_around_brackets = outside
+indent_brace_style = K&R
+
+
+# The JSON files contain newlines inconsistently
+[*.json]
+indent_style = space
+indent_size = 2
+insert_final_newline = false
+
+# Minified JavaScript files shouldn't be changed
+[**.min.js]
+indent_style = ignore
+insert_final_newline = false
+
+# Makefiles always use tabs for indentation
+[Makefile]
+indent_style = tab
+indent_size = 8
+
+# Batch files use tabs for indentation
+[*.bat]
+indent_style = tab
+
+[**.txt]
+max_line_length = 79
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.less]
+indent_size = 4
+
+[*.{yml,yaml}]
+indent_size = 2
+

features/expo/deviceInfo/constants.ts

@@ -0,0 +1,43 @@
+export interface DeviceInfo {
+    brand: string | null;
+    manufacturer: string | null;
+    deviceName: string | null;
+    modelId: string | null;
+    modelName: string | null;
+    osName: string | null;
+    osVersion: string | null;
+    osBuildId: string | null;
+    osInternalBuildId: string | null;
+    deviceType: string | null;
+    deviceYearClass: number | null;
+    isDevice: boolean | null;
+    supportedCpuArchitectures: string[] | null;
+    totalMemory: number | null;
+    uptime: string | null;
+    isJailBroken: boolean | null;
+}
+
+export const DEVICE_INFO_FIELDS: {
+    title: string;
+    identifier: keyof DeviceInfo;
+}[] = [
+    { title: 'Brand', identifier: 'brand' },
+    { title: 'Manufacturer', identifier: 'manufacturer' },
+    { title: 'Device Name', identifier: 'deviceName' },
+    { title: 'Model ID', identifier: 'modelId' },
+    { title: 'Model Name', identifier: 'modelName' },
+    { title: 'OS Name', identifier: 'osName' },
+    { title: 'OS Version', identifier: 'osVersion' },
+    { title: 'OS Build ID', identifier: 'osBuildId' },
+    { title: 'OS Internal Build ID', identifier: 'osInternalBuildId' },
+    { title: 'Device Type', identifier: 'deviceType' },
+    { title: 'Device Year Class', identifier: 'deviceYearClass' },
+    { title: 'Physical Device', identifier: 'isDevice' },
+    {
+        title: 'Supported CPU Architectures',
+        identifier: 'supportedCpuArchitectures',
+    },
+    { title: 'Total Memory (Bytes)', identifier: 'totalMemory' },
+    { title: 'Uptime', identifier: 'uptime' },
+    { title: 'Jail Broken', identifier: 'isJailBroken' },
+];

features/expo/deviceInfo/enums.ts

@@ -0,0 +1,7 @@
+export enum DeviceType {
+    UNKNOWN = 0,
+    PHONE = 1,
+    TABLET = 2,
+    DESKTOP = 3,
+    TV = 4,
+}

features/expo/deviceInfo/hooks.ts

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+
+import { enumToStr } from '../../../utils/enum';
+import * as Device from 'expo-device';
+import { DateTime } from 'luxon';
+
+import { DeviceInfo } from './constants';
+import { DeviceType } from './enums';
+
+export const useDeviceInfo = () => {
+    const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
+        brand: null,
+        manufacturer: null,
+        deviceName: null,
+        modelId: null,
+        modelName: null,
+        osName: null,
+        osVersion: null,
+        osBuildId: null,
+        osInternalBuildId: null,
+        deviceType: null,
+        deviceYearClass: null,
+        isDevice: null,
+        supportedCpuArchitectures: null,
+        totalMemory: null,
+        uptime: null,
+        isJailBroken: null,
+    });
+
+    useEffect(() => {
+        const fetchDeviceInfo = () => {
+            Device.getDeviceTypeAsync()
+                .then((deviceType) => {
+                    if (deviceType) {
+                        setDeviceInfo((prev) => ({
+                            ...prev,
+                            deviceType: enumToStr(DeviceType, deviceType),
+                        }));
+                    }
+                })
+                .catch((error) => {
+                    console.error('Failed to fetch device type:', error);
+                });
+
+            Device.getUptimeAsync()
+                .then((uptime) => {
+                    if (uptime) {
+                        setDeviceInfo((prev) => ({
+                            ...prev,
+                            uptime: DateTime.fromMillis(uptime).toFormat(
+                                'hh:mm:ss'
+                            ),
+                        }));
+                    }
+                })
+                .catch((error) => {
+                    console.error('Failed to fetch uptime:', error);
+                });
+
+            Device.isRootedExperimentalAsync()
+                .then((isJailBroken) => {
+                    if (isJailBroken !== null) {
+                        setDeviceInfo((prev) => ({ ...prev, isJailBroken }));
+                    }
+                })
+                .catch((error) => {
+                    console.error(
+                        'Failed to check if device is rooted:',
+                        error
+                    );
+                });
+
+            setDeviceInfo((prev) => ({
+                ...prev,
+                brand: Device.brand,
+                manufacturer: Device.manufacturer,
+                deviceName: Device.deviceName,
+                modelId: Device.modelId,
+                modelName: Device.modelName,
+                osName: Device.osName,
+                osVersion: Device.osVersion,
+                osBuildId: Device.osBuildId,
+                osInternalBuildId: Device.osInternalBuildId,
+                deviceYearClass: Device.deviceYearClass,
+                isDevice: Device.isDevice,
+                supportedCpuArchitectures: Device.supportedCpuArchitectures,
+                totalMemory: Device.totalMemory,
+            }));
+        };
+
+        fetchDeviceInfo();
+    }, []);
+
+    return deviceInfo;
+};

features/expo/deviceInfo/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Card, Text, View } from 'react-native-ui-lib';
+
+import { useDeviceInfo } from '../../../features/expo/deviceInfo/hooks';
+
+import { Dividers } from '../../../utils/theme';
+
+import { DEVICE_INFO_FIELDS } from './constants';
+
+export function ExpoDeviceInfo() {
+    const deviceInfo = useDeviceInfo();
+
+    return (
+        <Card padding-s4 gap-s4 marginV-s4 marginH-s4>
+            {DEVICE_INFO_FIELDS.map(({ title, identifier }, index) => (
+                <View
+                    key={identifier}
+                    gap-s2
+                    paddingT-s2
+                    style={index !== 0 && Dividers.top1}
+                >
+                    <Text text70>{title}</Text>
+                    <View>
+                        <Text>
+                            {deviceInfo[identifier] !== null
+                                ? deviceInfo[identifier]?.toString()
+                                : 'N/A'}
+                        </Text>
+                    </View>
+                </View>
+            ))}
+        </Card>
+    );
+}

utils/enum/index.ts

@@ -0,0 +1,6 @@
+import { snakeCaseToCapitalize } from '../string';
+
+export function enumToStr(enumObj: any, val: number): string {
+    let name = enumObj[val] as string;
+    return snakeCaseToCapitalize(name);
+}

utils/string/index.ts

@@ -0,0 +1,7 @@
+export function capitalize(name: string): string {
+    return `${name.charAt(0).toUpperCase()}${name.slice(1).toLowerCase()}`;
+}
+
+export function snakeCaseToCapitalize(name: string): string {
+    return name.split('_').map(capitalize).join(' ');
+}

utils/theme/index.ts

@@ -0,0 +1,28 @@
+import { Colors } from 'react-native-ui-lib';
+
+export const Dividers = {
+    get right1() {
+        return {
+            borderRightWidth: 1,
+            borderColor: Colors.$outlineDefault,
+        };
+    },
+    get left1() {
+        return {
+            borderLeftWidth: 1,
+            borderColor: Colors.$outlineDefault,
+        };
+    },
+    get bottom1() {
+        return {
+            borderBottomWidth: 1,
+            borderColor: Colors.$outlineDefault,
+        };
+    },
+    get top1() {
+        return {
+            borderTopWidth: 1,
+            borderColor: Colors.$outlineDefault,
+        };
+    },
+};