refactor: add RNDeviceInfo

@@ -298,6 +298,8 @@ PODS:
     - React
   - RNCMaskedView (0.1.7):
     - React
+  - RNDeviceInfo (5.5.4):
+    - React
   - RNGestureHandler (1.6.1):
     - React
   - RNReanimated (1.7.1):
@@ -346,6 +348,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - ReactNativeDarkMode (from `../node_modules/react-native-dark-mode`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -422,6 +425,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-dark-mode"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -472,6 +477,7 @@ SPEC CHECKSUMS:
   ReactCommon: 3585806280c51d5c2c0d3aa5a99014c3badb629d
   ReactNativeDarkMode: 0178ffca3b10f6a7c9f49d6f9810232b328fa949
   RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
+  RNDeviceInfo: 6a3d16fce033f6979c4a6a41e62244d183e8c765
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48
   RNScreens: b5c0e1b2b04512919e78bd3898e144a157ce2363

@@ -20,6 +20,7 @@
     "react": "16.11.0",
     "react-native": "0.62.1",
     "react-native-dark-mode": "^0.2.2",
+    "react-native-device-info": "^5.5.4",
     "react-native-elements": "^1.2.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.7.1",

 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStackNavigator } from '@react-navigation/stack';
 import Fontisto from 'react-native-vector-icons/Fontisto';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import { MainTabParamList } from '../type/Navigation';
+import { MainTabParamList, MainStackParamList } from '../type/Navigation';
 import WelcomePage from './WelcomePage';
 import SystemInfo from './SystemInfo';
 import DesignList from './DesignList';
 import { useDynamicValue } from 'react-native-dark-mode';
 import { colorPreset } from '../design';
+import RNDeviceInfoList from './RNDeviceInfo';
 
 const MainTab = createBottomTabNavigator<MainTabParamList>();
 
-export default () => {
+const Home = () => {
   const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary);
   const tintColor = useDynamicValue(colorPreset.linkColor);
   const opaqueSeparator = useDynamicValue(colorPreset.separator.opaque);
   return (
-    <NavigationContainer>
-      <MainTab.Navigator
-        screenOptions={({ route }) => {
-          const routeName = route.name;
-          return {
-            tabBarIcon: ({ focused, size, color }) => {
-              switch (routeName) {
-                case 'WelcomePage':
-                  return <Fontisto size={size} color={color} name={'react'} />;
-                case 'SystemInfo':
-                  return (
-                    <Ionicons
-                      size={size}
-                      color={color}
-                      name={
-                        focused
-                          ? 'ios-information-circle'
-                          : 'ios-information-circle-outline'
-                      }
-                    />
-                  );
-                case 'DesignList':
-                  return (
-                    <Ionicons
-                      size={size}
-                      color={color}
-                      name={'ios-color-palette'}
-                    />
-                  );
-                default:
-                  break;
-              }
-            },
-          };
-        }}
-        tabBarOptions={{
-          activeTintColor: tintColor,
-          style: {
-            backgroundColor: backgroundColor,
-            borderTopColor: opaqueSeparator,
+    <MainTab.Navigator
+      screenOptions={({ route }) => {
+        const routeName = route.name;
+        return {
+          tabBarIcon: ({ focused, size, color }) => {
+            switch (routeName) {
+              case 'WelcomePage':
+                return <Fontisto size={size} color={color} name={'react'} />;
+              case 'SystemInfo':
+                return (
+                  <Ionicons
+                    size={size}
+                    color={color}
+                    name={
+                      focused
+                        ? 'ios-information-circle'
+                        : 'ios-information-circle-outline'
+                    }
+                  />
+                );
+              case 'DesignList':
+                return (
+                  <Ionicons
+                    size={size}
+                    color={color}
+                    name={'ios-color-palette'}
+                  />
+                );
+              default:
+                break;
+            }
           },
-        }}
-      >
-        <MainTab.Screen name="WelcomePage" component={WelcomePage} />
-        <MainTab.Screen name="SystemInfo" component={SystemInfo} />
-        <MainTab.Screen name="DesignList" component={DesignList} />
-      </MainTab.Navigator>
+        };
+      }}
+      tabBarOptions={{
+        activeTintColor: tintColor,
+        style: {
+          backgroundColor: backgroundColor,
+          borderTopColor: opaqueSeparator,
+        },
+      }}
+    >
+      <MainTab.Screen name="WelcomePage" component={WelcomePage} />
+      <MainTab.Screen name="SystemInfo" component={SystemInfo} />
+      <MainTab.Screen name="DesignList" component={DesignList} />
+    </MainTab.Navigator>
+  );
+};
+
+const MainStack = createStackNavigator<MainStackParamList>();
+
+export default () => {
+  return (
+    <NavigationContainer>
+      <MainStack.Navigator>
+        <MainStack.Screen name="MainTab" component={Home} />
+        <MainStack.Screen
+          name="RNDeviceInfoList"
+          component={RNDeviceInfoList}
+        />
+      </MainStack.Navigator>
     </NavigationContainer>
   );
 };

+import React, { useState, useCallback, useEffect } from 'react';
+import { StackNavigationProp } from '@react-navigation/stack';
+import DeviceInfo from 'react-native-device-info';
+import { ListItem, BGScroll, Card, Divider, BGList } from '../component/View';
+import { MainStackParamList } from '../type/Navigation';
+
+type NavigationProp = StackNavigationProp<
+  MainStackParamList,
+  'RNDeviceInfoList'
+>;
+
+type DeviceInfoMethod = keyof typeof DeviceInfo;
+
+const keys = Object.keys(DeviceInfo).filter(
+  (k) => !k.startsWith('use') && !/Sync/.test(k)
+) as Array<DeviceInfoMethod>;
+
+const DeviceInfoItem = ({ k }: { k: DeviceInfoMethod }) => {
+  const [v, setV] = useState('');
+  const onEval = useCallback(async () => {
+    const method = DeviceInfo[k];
+    let result = '';
+    try {
+      const r = await method('');
+      result = typeof r === 'object' ? JSON.stringify(r) : String(r);
+    } catch (error) {
+      result = `err: ${error}`;
+    }
+    setV(result);
+  }, [k]);
+  useEffect(() => {
+    onEval();
+  }, [onEval]);
+  return <ListItem title={k} subtitle={v} onPress={onEval} />;
+};
+
+const RNDeviceInfoList = ({ navigation }: { navigation: NavigationProp }) => {
+  return (
+    <BGList
+      data={keys}
+      renderItem={({ item }) => {
+        return <DeviceInfoItem k={item} />;
+      }}
+    />
+  );
+};
+
+export default RNDeviceInfoList;

@@ -9,13 +9,15 @@ export default () => {
       <Card shadow>
         <ListItem
           title={'width'}
-          rightTitle={`${width}pt`}
+          rightTitle={`${Number.isInteger(width) ? width : width.toFixed(2)}pt`}
           rightSubtitle={`${width * scale}px`}
         />
         <Divider />
         <ListItem
           title={'height'}
-          rightTitle={`${height}pt`}
+          rightTitle={`${
+            Number.isInteger(height) ? height : height.toFixed(2)
+          }pt`}
           rightSubtitle={`${height * scale}px`}
         />
         <Divider />

@@ -3,3 +3,8 @@ export type MainTabParamList = {
   SystemInfo: undefined;
   DesignList: undefined;
 };
+
+export type MainStackParamList = {
+  MainTab: undefined;
+  RNDeviceInfoList: undefined;
+};

@@ -6596,6 +6596,11 @@ react-native-dark-mode@^0.2.2:
     events "^3.0.0"
     toolkit.ts "^0.0.2"
 
+react-native-device-info@^5.5.4:
+  version "5.5.4"
+  resolved "https://registry.npm.taobao.org/react-native-device-info/download/react-native-device-info-5.5.4.tgz#470770db4e8a35c55b8269473d81790102074057"
+  integrity sha1-Rwdw206KNcVbgmlHPYF5AQIHQFc=
+
 react-native-elements@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npm.taobao.org/react-native-elements/download/react-native-elements-1.2.7.tgz#1eca2db715c41722aeb67aea62bd2a4621adb134"