diff --git a/example/expo-router-example/.gitignore b/example/expo-router-example/.gitignore new file mode 100644 index 000000000..0b37b6eb4 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/example/expo-router-example/app.json b/example/expo-router-example/app.json new file mode 100644 index 000000000..acf1fa9bc --- /dev/null +++ b/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 + } + } +} diff --git a/example/expo-router-example/app/(tabs)/_layout.tsx b/example/expo-router-example/app/(tabs)/_layout.tsx new file mode 100644 index 000000000..8c47578f5 --- /dev/null +++ b/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['name']; + color: string; +}) { + return ; +} + +export default function TabLayout() { + const colorScheme = useColorScheme(); + + return ( + + , + headerRight: () => ( + + + {({ pressed }) => ( + + )} + + + ), + }} + /> + , + }} + /> + + ); +} diff --git a/example/expo-router-example/app/(tabs)/index.tsx b/example/expo-router-example/app/(tabs)/index.tsx new file mode 100644 index 000000000..ce55bb7cb --- /dev/null +++ b/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 ( + { + setActive(true); + onPressIn && onPressIn(); + }} + onPressOut={() => { + setActive(false); + onPressOut && onPressOut(); + }} + {...props} + > + {children} + + ); +}; + +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 ( + + dlfkvndlnv One + + + + ); +} + +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%', + }, +}); diff --git a/example/expo-router-example/app/(tabs)/two.tsx b/example/expo-router-example/app/(tabs)/two.tsx new file mode 100644 index 000000000..5ecef2571 --- /dev/null +++ b/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 ( + + Tab Two + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + title: { + fontSize: 20, + fontWeight: 'bold', + }, + separator: { + marginVertical: 30, + height: 1, + width: '80%', + }, +}); diff --git a/example/expo-router-example/app/+html.tsx b/example/expo-router-example/app/+html.tsx new file mode 100644 index 000000000..25524d773 --- /dev/null +++ b/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 ( + + + + + + {/* + 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: + + */} + + {/* + 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. + */} + + + {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} +