chore: update package.json and metro.config.js

dohooo · Dec 3, 2023 · 5e1e278 · 5e1e278
1 parent 4daae51
commit 5e1e278
Show file tree

Hide file tree

Showing 12 changed files with 6,576 additions and 7,617 deletions.
diff --git a/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs b/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
diff --git a/.yarn/releases/yarn-3.6.1.cjs b/.yarn/releases/yarn-3.6.1.cjs
diff --git a/.yarn/releases/yarn-4.0.2.cjs b/.yarn/releases/yarn-4.0.2.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs
diff --git a/example/app/src/Home.tsx b/example/app/src/Home.tsx
@@ -4,7 +4,6 @@ import {
   Text,
   StyleSheet,
   ScrollView,
-  TouchableHighlight,
 } from "react-native";
 
 // @ts-ignore
@@ -40,6 +39,7 @@ import { isAndroid, isIos } from "./utils";
 import { useWebContext } from "./store/WebProvider";
 import { convertName } from "./utils/helpers";
 import { useColor } from "./hooks/useColor";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 export const LayoutsPage = [
   {
@@ -170,11 +170,11 @@ if (isIos || isAndroid) {
 }
 
 const ListItem = ({ name, onPress, color }: { name: string; onPress: () => void; color: string }) => (
-  <TouchableHighlight onPress={onPress}>
+  <TouchableOpacity onPress={onPress}>
     <View style={styles.listItem}>
       <Text style={[styles.text, { color: color }]}>{convertName(name)}</Text>
     </View>
-  </TouchableHighlight>
+  </TouchableOpacity>
 );
 
 const SectionHeader = ({ title, color }: { title: string; color: any }) => (
@@ -201,21 +201,21 @@ const Index = () => {
   }, [webCtx])
 
   const renderSection = (title: string, data: PageItem[]) => (
-    <>
-      <SectionHeader title={title} color={colors} />
-      {data.map((item, index) => (
+    [
+      <SectionHeader key={title} title={title} color={colors} />,
+      ...(data.map((item, index) => (
         <ListItem
           key={index}
           name={item.name}
           onPress={() => navigation.navigate(item.name)}
           color={colors.text}
         />
-      ))}
-    </>
+      )))
+    ]
   );
 
   return (
-    <ScrollView style={{ flex: 1 }} stickyHeaderIndices={[0, LayoutsPage.length + 1, LayoutsPage.length + CustomAnimations.length + 2]}>
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 64 }} stickyHeaderIndices={[0, LayoutsPage.length + 1, LayoutsPage.length + CustomAnimations.length + 2]}>
       {renderSection('Layouts', LayoutsPage)}
       {renderSection('CustomAnimations', CustomAnimations)}
       {renderSection('Others', OtherPage)}

diff --git a/example/app/src/hooks/useColor.ts b/example/app/src/hooks/useColor.ts
@@ -1,12 +1,15 @@
+import { isWeb } from "../utils";
 import { useWebContext } from "../store/WebProvider"
 
 export const useColor = () => {
     const isDark = useWebContext()?.color === 'dark'
     const background = isDark ? "#121212" : "#ffffff";
     const text = isDark ? "#ffffff" : "#121212";
 
-    // @ts-ignore
-    document && (document.body.style.backgroundColor = background);
+    if (isWeb) {
+        // @ts-ignore
+        document && (document.body.style.backgroundColor = background);
+    }
 
     return {
         isDark,
@@ -15,6 +18,5 @@ export const useColor = () => {
             background,
             text
         }
-
     }
 }
diff --git a/example/app/src/navigation/root.tsx b/example/app/src/navigation/root.tsx
@@ -74,7 +74,7 @@ export const RootNavigator = () => {
                   Restart();
                 }}
               >
-                <Text style={{ color: tintColor }}>
+                <Text style={{ color: tintColor, marginRight: 12 }}>
                   {isRTL ? "LTR" : "RTL"}
                 </Text>
               </TouchableWithoutFeedback>

diff --git a/example/expo/metro.config.js b/example/expo/metro.config.js
@@ -15,6 +15,7 @@ const appPak = JSON.parse(
 
 const modules = [
   '@babel/runtime',
+  'metro-runtime',
   ...Object.keys({
     ...rootPak.dependencies,
     ...rootPak.peerDependencies,

diff --git a/example/expo/package.json b/example/expo/package.json
@@ -10,6 +10,7 @@
     "ios:pretty": "PRETTY=true expo start -c --ios",
     "web": "expo start --web",
     "web:pretty": "PRETTY=true expo start --web",
+    "s": "yarn start",
     "start": "expo start -c",
     "test": "jest --watch --coverage=false --changedSince=origin/main",
     "test:debug": "jest -o --watch --coverage=false",
@@ -25,16 +26,16 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "@react-navigation/stack": "^6.3.16",
-    "expo": "^49.0.0",
+    "expo": "^49.0.21",
     "expo-blur": "~12.4.1",
     "expo-constants": "~14.4.2",
     "expo-status-bar": "~1.6.0",
-    "expo-updates": "~0.18.10",
+    "expo-updates": "~0.18.17",
     "jest": "^29.2.1",
-    "jest-expo": "^47.0.1",
+    "jest-expo": "~49.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.3",
+    "react-native": "0.72.6",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
@@ -45,7 +46,7 @@
     "@babel/core": "^7.20.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/runtime": "^7.18.0",
-    "@expo/webpack-config": "^18.1.1",
+    "@expo/webpack-config": "^19.0.0",
     "@testing-library/jest-native": "^5.4.1",
     "@testing-library/react-native": "^11.5.0",
     "@types/react": "~18.2.14",
@@ -62,7 +63,7 @@
     "@babel/core": "^7.18.0",
     "@babel/runtime": "^7.18.0",
     "@babel/preset-typescript": "7.17.12",
-    "@types/react": "17.0.2",
+    "@types/react": "~18.2.14",
     "@types/react-native": "0.67.7",
     "react-error-overlay": "6.0.9"
   },