Merge pull request #515 from gluestack/release/@gluestack-style/react…

…@1.0.12

Release/@gluestack style/[email protected]

example/expo-router-example/.gitignore

@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

example/expo-router-example/app.json

@@ -0,0 +1,39 @@
+{
+  "expo": {
+    "name": "expo-router-example",
+    "slug": "expo-router-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

example/expo-router-example/app/(tabs)/_layout.tsx

@@ -0,0 +1,55 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Link, Tabs } from 'expo-router';
+import { Pressable, useColorScheme } from 'react-native';
+
+import Colors from '../../constants/Colors';
+
+/**
+ * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+ */
+function TabBarIcon(props: {
+  name: React.ComponentProps<typeof FontAwesome>['name'];
+  color: string;
+}) {
+  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
+}
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <Pressable>
+                {({ pressed }) => (
+                  <FontAwesome
+                    name="info-circle"
+                    size={25}
+                    color={Colors[colorScheme ?? 'light'].text}
+                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
+                  />
+                )}
+              </Pressable>
+            </Link>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

example/expo-router-example/app/(tabs)/index.tsx

@@ -0,0 +1,161 @@
+import { StyleSheet } from 'react-native';
+import React from 'react';
+import { Text, View, Pressable } from 'react-native';
+import { styled } from '@gluestack-style/react';
+import { Link } from 'expo-router';
+
+const Box = styled(
+  View,
+  {
+    p: '$10',
+    bg: '$amber500',
+  },
+  {
+    componentName: 'Boxxx',
+  }
+);
+
+const StyledButton = styled(
+  Pressable,
+  {
+    'p': '$3',
+    'bg': '$blue500',
+    'variants': {
+      variant: {
+        solid: {
+          ':active': {
+            bg: '$pink500',
+          },
+          // '_text': {
+          //   ':active': {
+          //     bg: '$textLight0',
+          //   },
+          // },
+        },
+      },
+    },
+
+    'props': {
+      variant: 'solid',
+    },
+
+    ':disabled': {
+      opacity: 0.4,
+    },
+  },
+  {
+    descendantStyle: ['_text'],
+    componentName: 'Button',
+  }
+);
+
+const Button = ({ children, onPressIn, onPressOut, ...props }: any) => {
+  const [active, setActive] = React.useState(false);
+  return (
+    <StyledButton
+      role={props?.role || 'button'}
+      states={{
+        active,
+      }}
+      onPressIn={() => {
+        setActive(true);
+        onPressIn && onPressIn();
+      }}
+      onPressOut={() => {
+        setActive(false);
+        onPressOut && onPressOut();
+      }}
+      {...props}
+    >
+      {children}
+    </StyledButton>
+  );
+};
+
+const linkSx = {
+  props: {
+    as: View,
+  },
+};
+
+const WrapperComp = ({ children }: any) => {
+  console.log('herhehre');
+
+  React.useEffect(() => {
+    console.log('mounted');
+
+    return () => {
+      console.log('unmounted');
+    };
+  }, []);
+
+  return children;
+};
+
+export default function TabOneScreen() {
+  // const [click, setClick] = React.useState(false);
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>dlfkvndlnv One</Text>
+      <Button
+        // onPressIn={() => setClick(true)}
+        // onPressOut={() => setClick(false)}
+        onPress={() => {
+          console.log('Hello word');
+        }}
+        sx={{
+          _text: {
+            // color: click ? '$red500' : '$amber500',
+            ':active': {
+              bg: '$textLight0',
+            },
+          },
+        }}
+      >
+        <Box
+          href="/modal"
+          sx={{
+            props: {
+              as: Link,
+            },
+          }}
+        />
+      </Button>
+      <Button
+        sx={{
+          _text: {
+            ':active': {
+              bg: '$textLight0',
+            },
+          },
+        }}
+      >
+        <Box
+          href="/modal"
+          as={Link}
+          sx={{
+            bg: '$red500',
+          }}
+        />
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+});

example/expo-router-example/app/(tabs)/two.tsx

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+import EditScreenInfo from '../../components/EditScreenInfo';
+import { Text, View } from '../../components/Themed';
+
+export default function TabTwoScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Tab Two</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <EditScreenInfo path="app/(tabs)/two.tsx" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+});

example/expo-router-example/app/+html.tsx

@@ -0,0 +1,46 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+
+        {/* 
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+        />
+        {/* 
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;