chore: updated and pinned dep versions

App.js

@@ -4,6 +4,7 @@ import { Button, StyleSheet, Text, View } from "react-native";
 
 import Dripsy from "./components/Dripsy";
 import EmotionNative from "./components/EmotionNative";
+import FastStyles from "./components/FastStyles";
 import Gluestack from "./components/Gluestack";
 import NativeWind from "./components/NativeWind";
 import Native from "./components/ReactNative";
@@ -12,9 +13,8 @@ import StyledComponents from "./components/StyledComponents";
 import Tamagui from "./components/Tamagui";
 import TimedRender from "./components/TimedRender";
 import Twrnc from "./components/Twrnc";
-import { Zephyr } from "./components/Zephyr";
-import FastStyles from "./components/FastStyles";
 import Unistyles from "./components/Unistyles";
+import { Zephyr } from "./components/Zephyr";
 
 export default function App() {
   const [styleType, setStyleType] = useState(undefined);

babel.config.js

@@ -3,7 +3,10 @@ process.env.TAMAGUI_TARGET = "native"; // Don't forget to specify your TAMAGUI_T
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
     plugins: [
       ["@gluestack-style/babel-plugin-styled-resolver"],
       [
@@ -20,7 +23,6 @@ module.exports = function (api) {
           include: "TAMAGUI_TARGET",
         },
       ],
-      "nativewind/babel",
     ],
   };
 };

components/NativeWind.js

@@ -1,14 +1,12 @@
 import { View } from "react-native";
-import { styled } from "nativewind";
+import "../global.css";
 import { COUNT } from "../utils";
 
-const StyledView = styled(View, "border-2 p-1.5 border-red-600");
-
 const NativeWind = () => {
   return (
     <View style={{ display: "flex", flexDirection: "row" }}>
       {new Array(COUNT).fill(0).map((_, i) => (
-        <StyledView key={i} />
+        <View className="border-2 p-1.5 border-red-600" key={i} />
       ))}
     </View>
   );

components/Unistyles.js

@@ -1,51 +1,45 @@
 import { View } from "react-native";
-import { UnistylesTheme, createUnistyles } from 'react-native-unistyles';
+import { UnistylesTheme, createUnistyles } from "react-native-unistyles";
 import theme from "../themes/unistyles-theme";
 
 const breakpoints = {
-    xs: 0,
-    sm: 200,
-    md: 500
+  xs: 0,
+  sm: 200,
+  md: 500,
 };
 
-const {
-    createStyles,
-    useStyles
-} = createUnistyles(breakpoints);
+const { createStyleSheet, useStyles } = createUnistyles(breakpoints);
 
 const Unistyles = () => {
-    return (
-        <UnistylesTheme theme={theme}>
-            <Demo />
-        </UnistylesTheme>
-    )
+  return (
+    <UnistylesTheme theme={theme}>
+      <Demo />
+    </UnistylesTheme>
+  );
 };
 
 const Demo = () => {
-    const { styles } = useStyles(stylesheet)
+  const { styles } = useStyles(stylesheet);
 
-    return (
-        <View style={styles.container}>
-            {new Array(1000).fill(0).map((_, i) => (
-                <View
-                    key={i}
-                    style={styles.box}
-                />
-            ))}
-        </View>
-    )
+  return (
+    <View style={styles.container}>
+      {new Array(1000).fill(0).map((_, i) => (
+        <View key={i} style={styles.box} />
+      ))}
+    </View>
+  );
 };
 
-const stylesheet = createStyles(theme => ({
-    container: {
-        display: 'flex',
-        flexDirection: 'row'
-    },
-    box: {
-        borderColor: theme.colors.red,
-        padding: 5,
-        borderWidth: 2
-    }
+const stylesheet = createStyleSheet((theme) => ({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  box: {
+    borderColor: theme.colors.red,
+    padding: 5,
+    borderWidth: 2,
+  },
 }));
 
 export default Unistyles;

global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname, { isCSSEnabled: true });
+
+module.exports = withNativeWind(config, { input: "./global.css" });

package.json

@@ -13,48 +13,50 @@
   "dependencies": {
     "@emotion/native": "11.11.0",
     "@emotion/react": "11.11.1",
-    "@fast-styles/react": "^0.2.9",
+    "@fast-styles/react": "0.2.9",
     "@gluestack-style/animation-plugin": "0.1.12",
-    "@gluestack-style/react": "0.2.51",
+    "@gluestack-style/react": "1.0.15",
     "@gluestack-ui/provider": "0.1.10",
-    "@gluestack-ui/themed": "^0.1.53",
-    "@gluestack-ui/vstack": "0.1.11",
+    "@gluestack-ui/themed": "1.0.13",
+    "@gluestack-ui/vstack": "0.1.15",
     "@shopify/restyle": "2.4.2",
-    "@tamagui/animations-react-native": "1.74.8",
-    "@tamagui/config": "1.74.8",
-    "@tamagui/core": "1.74.8",
-    "@tamagui/font-inter": "1.74.8",
-    "@tamagui/react-native-media-driver": "1.74.8",
-    "@tamagui/shorthands": "1.74.8",
-    "@tamagui/theme-base": "1.74.8",
-    "@tamagui/themes": "1.74.8",
-    "@types/react": "18.2.20",
+    "@tamagui/animations-react-native": "1.76.0",
+    "@tamagui/config": "1.76.0",
+    "@tamagui/core": "1.76.0",
+    "@tamagui/font-inter": "1.76.0",
+    "@tamagui/react-native-media-driver": "1.76.0",
+    "@tamagui/shorthands": "1.76.0",
+    "@tamagui/theme-base": "1.76.0",
+    "@tamagui/themes": "1.76.0",
     "babel-plugin-transform-inline-environment-variables": "0.4.4",
     "dripsy": "4.3.3",
-    "expo": "49.0.13",
+    "expo": "49.0.17",
     "expo-font": "11.6.0",
     "expo-splash-screen": "0.22.0",
     "expo-status-bar": "1.7.1",
     "gluestack-ui": "2.0.1",
-    "nativewind": "2.0.11",
+    "nativewind": "4.0.13",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.5",
-    "react-native-unistyles": "^1.0.0-beta.1",
+    "react-native": "0.72.6",
+    "react-native-reanimated": "3.3.0",
+    "react-native-unistyles": "1.1.6",
     "react-native-web": "0.19.9",
     "react-native-zephyr": "1.1.2",
-    "styled-components": "6.0.8",
-    "tamagui": "1.74.8",
-    "twrnc": "^3.6.4"
+    "styled-components": "6.1.1",
+    "tamagui": "1.76.0",
+    "twrnc": "3.6.4"
   },
   "devDependencies": {
-    "@babel/core": "7.23.0",
-    "@gluestack-style/babel-plugin-styled-resolver": "0.2.6",
-    "@tamagui/babel-plugin": "1.74.8",
-    "@types/react-native": "0.72.3",
+    "@babel/core": "7.23.3",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@gluestack-style/babel-plugin-styled-resolver": "1.0.1",
+    "@tamagui/babel-plugin": "1.76.0",
     "react-native": "0.72.5",
+    "react-native-svg": "^13.14.0",
     "react-native-web": "0.19.9",
-    "tailwindcss": "3.3.2"
+    "tailwindcss": "3.3.5"
   },
   "private": true
 }

tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
   theme: {
     extend: {},
   },