From 0e56689320fcd4f0188c5afdc8638f1c60bd8aa8 Mon Sep 17 00:00:00 2001
From: kdn0325 <dn10003@gmail.com>
Date: Sun, 10 Mar 2024 01:57:38 +0900
Subject: [PATCH] feat: example code update

---
 example/src/App.tsx | 49 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 2a8280f..a6a9fc5 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,18 +1,35 @@
 import * as React from 'react';
-
 import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'react-native-dimensions-util';
+import { useEffect, useState } from 'react';
+import {
+  fontSizeScale,
+  horizontalScale,
+  verticalScale,
+} from 'react-native-dimensions-util';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
+  const [color, setColor] = useState('#000000');
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setColor(
+        `#${Math.floor(Math.random() * 16777215)
+          .toString(16)
+          .padStart(6, '0')}`
+      );
+    }, 1000);
 
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
+    return () => clearInterval(interval);
   }, []);
 
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <View style={{ ...styles.boxContainer, backgroundColor: color }}>
+        <Text style={styles.box}>Small Box</Text>
+      </View>
+      <View style={{ ...styles.boxContainer2, backgroundColor: color }}>
+        <Text style={styles.box}>Medium Box</Text>
+      </View>
     </View>
   );
 }
@@ -23,9 +40,23 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  boxContainer: {
+    width: horizontalScale(60),
+    height: verticalScale(60),
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: verticalScale(20),
+  },
+  boxContainer2: {
+    width: horizontalScale(80),
+    height: verticalScale(80),
+    marginVertical: verticalScale(40),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
+    textAlign: 'center',
+    fontSize: fontSizeScale(20),
+    color: '#fff',
   },
 });