add test

App.js

@@ -2,14 +2,15 @@ import { useFonts } from "expo-font";
 import { useState } from "react";
 import { Button, StyleSheet, Text, View } from "react-native";
 
-import Dripsy from "./components/Dripsy";
+// import Dripsy from "./components/Dripsy";
 import EmotionNative from "./components/EmotionNative";
 import Gluestack from "./components/Gluestack";
 import NativeWind from "./components/NativeWind";
 import Native from "./components/ReactNative";
+import CrossedStyled from "./components/CrossedStyled";
 import Restyle from "./components/Restyle";
 import StyledComponents from "./components/StyledComponents";
-import Tamagui from "./components/Tamagui";
+// import Tamagui from "./components/Tamagui";
 import TimedRender from "./components/TimedRender";
 import Twrnc from "./components/Twrnc";
 import { Zephyr } from "./components/Zephyr";
@@ -29,16 +30,16 @@ export default function App() {
         return <Native />;
       case "Styled Components":
         return <StyledComponents />;
-      case "Tamagui":
-        return <Tamagui />;
+      // case "Tamagui":
+      //   return <Tamagui />;
       case "Restyle":
         return <Restyle />;
       case "NativeWind":
         return <NativeWind />;
       case "Emotion Native":
         return <EmotionNative />;
-      case "Dripsy":
-        return <Dripsy />;
+      case "CrossedStyled":
+        return <CrossedStyled />;
       case "Zephyr":
         return <Zephyr />;
       case "Gluestack":
@@ -89,7 +90,8 @@ export default function App() {
       <Button title="NativeWind" onPress={onStyleTypePress("NativeWind")} />
       <Button title="Tamagui" onPress={onStyleTypePress("Tamagui")} />
       <Button title="Gluestack" onPress={onStyleTypePress("Gluestack")} />
-      <Button title="Dripsy" onPress={onStyleTypePress("Dripsy")} />
+      <Button title="CrossedStyled" onPress={onStyleTypePress("CrossedStyled")} />
+      {/* <Button title="Dripsy" onPress={onStyleTypePress("Dripsy")} /> */}
       {styleType ? (
         <TimedRender key={styleType}>
           <Text style={styles.text}>

app/index.tsx

@@ -0,0 +1,139 @@
+import * as React from "react";
+import { useFonts } from "expo-font";
+import { useState } from "react";
+import { Button, StyleSheet, Text, View } from "react-native";
+
+// import Dripsy from "./components/Dripsy";
+// import EmotionNative from "../components/EmotionNative";
+import Gluestack from "../components/Gluestack";
+import NativeWind from "../components/NativeWind";
+import Native from "../components/ReactNative";
+import CrossedStyled from "../components/CrossedStyled";
+import CrossedStyledWithStyle from "../components/CrossedStyledWithStyle";
+import CrossedStyledUseStyleGlobal from "../components/CrossedStyledUseStyleGlobal";
+import Restyle from "../components/Restyle";
+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";
+
+export default function App() {
+  const [styleType, setStyleType] = useState<string | undefined>(undefined);
+
+  const onStyleTypePress = (curry) => () => {
+    setStyleType(curry);
+  };
+
+  const renderStyleLibrary = () => {
+    switch (styleType) {
+      case "React Native":
+        return <Native />;
+      case "Styled Components":
+        return <StyledComponents />;
+      // case "Tamagui":
+      //   return <Tamagui />;
+      case "Restyle":
+        return <Restyle />;
+      case "NativeWind":
+        return <NativeWind />;
+      // case "Emotion Native":
+      //   return <EmotionNative />;
+      case "CrossedStyled":
+        return <CrossedStyled />;
+      case "CrossedStyledWithStyle":
+        return <CrossedStyledWithStyle />;
+      case "CrossedStyledUseStyleGlobal":
+        return <CrossedStyledUseStyleGlobal />;
+      case "Zephyr":
+        return <Zephyr />;
+      case "Gluestack":
+        return <Gluestack />;
+      case "Twrnc":
+        return <Twrnc />;
+      case "FastStyles":
+        return <FastStyles />;
+      // case "Unistyles":
+      //   return <Unistyles />;
+      default:
+        return null;
+    }
+  };
+
+  // const [loaded] = useFonts({
+  //   Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
+  //   InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf"),
+  // });
+
+  // if (!loaded) {
+  //   return null;
+  // }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Tap a style library to start rendering</Text>
+      <Button title="React Native" onPress={onStyleTypePress("React Native")} />
+      {/* <Button
+        title="react-native-unistyles"
+        onPress={onStyleTypePress("Unistyles")}
+      /> */}
+      <Button title="fast-styles" onPress={onStyleTypePress("FastStyles")} />
+      <Button
+        title="twrnc (tailwind rn class names)"
+        onPress={onStyleTypePress("Twrnc")}
+      />
+      <Button title="Zephyr" onPress={onStyleTypePress("Zephyr")} />
+      <Button title="Restyle" onPress={onStyleTypePress("Restyle")} />
+      <Button
+        title="Styled Components"
+        onPress={onStyleTypePress("Styled Components")}
+      />
+      {/* <Button
+        title="Emotion Native"
+        onPress={onStyleTypePress("Emotion Native")}
+      /> */}
+      <Button title="NativeWind" onPress={onStyleTypePress("NativeWind")} />
+      <Button title="Tamagui" onPress={onStyleTypePress("Tamagui")} />
+      <Button title="Gluestack" onPress={onStyleTypePress("Gluestack")} />
+      <Button
+        title="CrossedStyled"
+        onPress={onStyleTypePress("CrossedStyled")}
+      />
+      <Button
+        title="CrossedStyledWithStyle"
+        onPress={onStyleTypePress("CrossedStyledWithStyle")}
+      />
+      <Button
+        title="CrossedStyledUseStyleGlobal"
+        onPress={onStyleTypePress("CrossedStyledUseStyleGlobal")}
+      />
+      {/* <Button title="Dripsy" onPress={onStyleTypePress("Dripsy")} /> */}
+      {styleType ? (
+        <TimedRender key={styleType}>
+          <Text style={styles.text}>
+            Rendering with <Text style={styles.bold}>{styleType}</Text>
+          </Text>
+        </TimedRender>
+      ) : null}
+      {renderStyleLibrary()}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    backgroundColor: "#fff",
+    flex: 1,
+    justifyContent: "center",
+  },
+  text: {
+    marginVertical: 12,
+  },
+  bold: {
+    fontWeight: "bold",
+    fontSize: 16,
+  },
+});

components/CrossedStyled.tsx

@@ -0,0 +1,29 @@
+import React, { View } from "react-native";
+import { Registry } from "@crossed/styled/lib/commonjs/Registry";
+import { BasePlugin } from "@crossed/styled/plugins";
+import { createStyles, useStyles } from "@crossed/styled/lib/commonjs/index";
+import { COUNT } from "../utils";
+Registry.addPlugin(BasePlugin);
+
+const styleSheet = createStyles({
+  root: {
+    base: { borderColor: "red", borderWidth: 2, padding: 5 },
+  },
+});
+
+const CrossedStyled = () => {
+  return (
+    <View style={{ display: "flex", flexDirection: "row" }}>
+      {new Array(COUNT).fill(0).map((_, i) => (
+        <Demo key={i} />
+      ))}
+    </View>
+  );
+};
+
+function Demo () {
+  const { root } = useStyles(styleSheet);
+  return <View {...root} />
+}
+
+export default CrossedStyled;

components/CrossedStyledUseStyleGlobal.tsx

@@ -0,0 +1,25 @@
+import React, { View } from "react-native";
+import { Registry } from "@crossed/styled/lib/commonjs/Registry";
+import { BasePlugin } from "@crossed/styled/plugins";
+import { createStyles, useStyles } from "@crossed/styled/lib/commonjs/index";
+import { COUNT } from "../utils";
+Registry.addPlugin(BasePlugin);
+
+const styleSheet = createStyles({
+  root: {
+    base: { borderColor: "red", borderWidth: 2, padding: 5 },
+  },
+});
+
+const CrossedStyled = () => {
+  const { root } = useStyles(styleSheet);
+  return (
+    <View style={{ display: "flex", flexDirection: "row" }}>
+      {new Array(COUNT).fill(0).map((_, i) => (
+        <View key={i} {...root} />
+      ))}
+    </View>
+  );
+};
+
+export default CrossedStyled;

components/CrossedStyledWithStyle.tsx

@@ -0,0 +1,22 @@
+import React, { View } from "react-native";
+import { Registry } from "@crossed/styled/lib/commonjs/Registry";
+import { BasePlugin } from "@crossed/styled/plugins";
+import { withStyle } from "@crossed/styled/lib/commonjs/index";
+import { COUNT } from "../utils";
+Registry.addPlugin(BasePlugin);
+
+const Box = withStyle(View, {
+  base: { borderColor: "red", borderWidth: 2, padding: 5 },
+})
+
+const CrossedStyled = () => {
+  return (
+    <View style={{ display: "flex", flexDirection: "row" }}>
+      {new Array(COUNT).fill(0).map((_, i) => (
+        <Box key={i} />
+      ))}
+    </View>
+  );
+};
+
+export default CrossedStyled;

index.js

@@ -0,0 +1,10 @@
+import { registerRootComponent } from 'expo';
+import { ExpoRoot } from 'expo-router';
+
+// Must be exported or Fast Refresh won't update the context
+export function App() {
+  const ctx = require.context('./app');
+  return <ExpoRoot context={ctx} />;
+}
+
+registerRootComponent(App);

metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+config.resolver.unstable_enableSymlinks = true;
+config.resolver.unstable_enablePackageExports = true;
+module.exports = config;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "styledcomponents",
   "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "index.js",
   "scripts": {
     "start-native": "TAMAGUI_TARGET=native expo start -c",
     "start-native-release-mode": "TAMAGUI_TARGET=native expo start --no-dev --minify",
@@ -11,6 +11,7 @@
     "web": "TAMAGUI_TARGET=web expo start --web"
   },
   "dependencies": {
+    "@crossed/styled": "0.14.0-beta.3",
     "@emotion/native": "11.11.0",
     "@emotion/react": "11.11.1",
     "@fast-styles/react": "^0.2.9",
@@ -31,15 +32,16 @@
     "@types/react": "18.2.20",
     "babel-plugin-transform-inline-environment-variables": "0.4.4",
     "dripsy": "4.3.3",
-    "expo": "49.0.13",
-    "expo-font": "11.6.0",
-    "expo-splash-screen": "0.22.0",
-    "expo-status-bar": "1.7.1",
+    "expo": "50.0.14",
+    "expo-font": "11.10.3",
+    "expo-router": "3.4.8",
+    "expo-splash-screen": "0.26.4",
+    "expo-status-bar": "1.11.1",
     "gluestack-ui": "2.0.1",
     "nativewind": "2.0.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.5",
+    "react-native": "0.73.6",
     "react-native-unistyles": "^1.0.0-beta.1",
     "react-native-web": "0.19.9",
     "react-native-zephyr": "1.1.2",
@@ -54,7 +56,8 @@
     "@types/react-native": "0.72.3",
     "react-native": "0.72.5",
     "react-native-web": "0.19.9",
-    "tailwindcss": "3.3.2"
+    "tailwindcss": "3.3.2",
+    "typescript": "^5.4.2"
   },
   "private": true
 }