feat: simple divider

@@ -5,6 +5,7 @@ import {
   useDynamicStyleSheet,
 } from 'react-native-dark-mode';
 import { colorPreset } from '../../design';
+import { View, StyleSheet } from 'react-native';
 
 const dynamicStyles = new DynamicStyleSheet({
   containerStyle: {
@@ -22,8 +23,18 @@ const dynamicStyles = new DynamicStyleSheet({
   rightSubtitleStyle: {
     color: colorPreset.labelColor.primary,
   },
+  opaqueSeparator: {
+    backgroundColor: colorPreset.separator.opaque,
+    height: StyleSheet.hairlineWidth,
+    marginLeft: 16,
+  },
 });
 
+export const Divider = () => {
+  const styles = useDynamicStyleSheet(dynamicStyles);
+  return <View style={styles.opaqueSeparator} />;
+};
+
 export const ListItem = ({
   containerStyle,
   titleStyle,

 import React from 'react';
 import { useWindowDimensions } from 'react-native';
-import { ListItem, BGScroll, Card } from '../component/View';
+import { ListItem, BGScroll, Card, Divider } from '../component/View';
 
 export default () => {
   const { width, height, fontScale, scale } = useWindowDimensions();
@@ -12,12 +12,15 @@ export default () => {
           rightTitle={`${width}pt`}
           rightSubtitle={`${width * scale}px`}
         />
+        <Divider />
         <ListItem
           title={'height'}
           rightTitle={`${height}pt`}
           rightSubtitle={`${height * scale}px`}
         />
+        <Divider />
         <ListItem title={'fontScale'} rightTitle={fontScale.toString()} />
+        <Divider />
         <ListItem title={'scale'} rightTitle={scale.toString()} />
       </Card>
     </BGScroll>