diff --git a/apps/App.tsx b/apps/App.tsx index 23a9af9c4..9ea02b323 100644 --- a/apps/App.tsx +++ b/apps/App.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { enableFreeze } from 'react-native-screens'; -import Example from './Example'; -// import * as Test from './src/tests'; +//import Example from './Example'; + import * as Test from './src/tests'; enableFreeze(true); export default function App() { - return ; - // return ; + //return ; + return ; } diff --git a/apps/src/tests/TestAndroidModal/index.tsx b/apps/src/tests/TestAndroidModal/index.tsx new file mode 100644 index 000000000..6d3ff5620 --- /dev/null +++ b/apps/src/tests/TestAndroidModal/index.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { HeaderButton, Text } from '@react-navigation/elements'; +import { + createStaticNavigation, + StaticParamList, +} from '@react-navigation/native'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +//import { Image } from "react-native"; +import { Home } from './screens/Home'; +import { Profile } from './screens/Profile'; +import { Settings } from './screens/Settings'; +import { Updates } from './screens/Updates'; +import { NotFound } from './screens/NotFound'; + +const HomeTabs = createBottomTabNavigator({ + screens: { + Home: { + screen: Home, + options: { + title: 'Feed', + }, + }, + Updates: { + screen: Updates, + options: { + }, + }, + }, +}); + +const RootStack = createNativeStackNavigator({ + screens: { + HomeTabs: { + screen: HomeTabs, + options: { + title: 'Home', + headerShown: false, + }, + }, + Profile: { + screen: Profile, + linking: { + path: ':user(@[a-zA-Z0-9-_]+)', + parse: { + user: (value) => value.replace(/^@/, ''), + }, + stringify: { + user: (value) => `@${value}`, + }, + }, + }, + Settings: { + screen: Settings, + options: ({ navigation }) => ({ + presentation: 'modal', + animation: 'slide_from_bottom', + headerShown: true, + headerRight: () => ( + + Close + + ), + }), + }, + NotFound: { + screen: NotFound, + options: { + title: '404', + }, + linking: { + path: '*', + }, + }, + }, +}); + +const Navigation = createStaticNavigation(RootStack); + +export default function App() { + return ( + + ); +} + +type RootStackParamList = StaticParamList; + +declare global { + namespace ReactNavigation { + interface RootParamList extends RootStackParamList { } + } +} diff --git a/apps/src/tests/TestAndroidModal/screens/Home.tsx b/apps/src/tests/TestAndroidModal/screens/Home.tsx new file mode 100644 index 000000000..d9d4d965a --- /dev/null +++ b/apps/src/tests/TestAndroidModal/screens/Home.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Button, Text } from '@react-navigation/elements'; +import { StyleSheet, View } from 'react-native'; + +export function Home() { + return ( + + Home Screen + Open up 'src/App.tsx' to start working on your app! + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + gap: 10, + }, +}); diff --git a/apps/src/tests/TestAndroidModal/screens/NotFound.tsx b/apps/src/tests/TestAndroidModal/screens/NotFound.tsx new file mode 100644 index 000000000..50ba0d746 --- /dev/null +++ b/apps/src/tests/TestAndroidModal/screens/NotFound.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { Text, Button } from '@react-navigation/elements'; +import { StyleSheet, View } from 'react-native'; + +export function NotFound() { + return ( + + 404 + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + gap: 10, + }, +}); diff --git a/apps/src/tests/TestAndroidModal/screens/Profile.tsx b/apps/src/tests/TestAndroidModal/screens/Profile.tsx new file mode 100644 index 000000000..e0ae5c6bc --- /dev/null +++ b/apps/src/tests/TestAndroidModal/screens/Profile.tsx @@ -0,0 +1,25 @@ +import { Text } from '@react-navigation/elements'; +import { StaticScreenProps } from '@react-navigation/native'; +import React from 'react'; +import { StyleSheet, View } from 'react-native'; + +type Props = StaticScreenProps<{ + user: string; +}>; + +export function Profile({ route }: Props) { + return ( + + {route.params.user}'s Profile + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + gap: 10, + }, +}); diff --git a/apps/src/tests/TestAndroidModal/screens/Settings.tsx b/apps/src/tests/TestAndroidModal/screens/Settings.tsx new file mode 100644 index 000000000..7cc13e1e0 --- /dev/null +++ b/apps/src/tests/TestAndroidModal/screens/Settings.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Text } from '@react-navigation/elements'; +import { StyleSheet, View } from 'react-native'; + +export function Settings() { + return ( + + Settings Screen + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + gap: 10, + }, + row: { + flexDirection: 'row', + gap: 10, + }, +}); diff --git a/apps/src/tests/TestAndroidModal/screens/Updates.tsx b/apps/src/tests/TestAndroidModal/screens/Updates.tsx new file mode 100644 index 000000000..ae554677d --- /dev/null +++ b/apps/src/tests/TestAndroidModal/screens/Updates.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Text } from '@react-navigation/elements'; +import { StyleSheet, View } from 'react-native'; + +export function Updates() { + return ( + + Updates Screen + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + gap: 10, + }, +}); diff --git a/apps/src/tests/TestAndroidTransitions.tsx b/apps/src/tests/TestAndroidTransitions.tsx index 0d98e720e..e6c619856 100644 --- a/apps/src/tests/TestAndroidTransitions.tsx +++ b/apps/src/tests/TestAndroidTransitions.tsx @@ -1,8 +1,9 @@ -import { NavigationContainer, RouteProp } from "@react-navigation/native"; -import { NativeStackNavigationProp, createNativeStackNavigator } from "@react-navigation/native-stack"; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { NavigationContainer, RouteProp } from '@react-navigation/native'; +import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack'; // import { NativeStackNavigationProp, createNativeStackNavigator } from "react-native-screens/native-stack"; -import React from "react"; -import { Button, TextInput, View } from "react-native"; +import React from 'react'; +import { Button, TextInput, View } from 'react-native'; type RouteParamList = { Home: undefined; @@ -10,6 +11,9 @@ type RouteParamList = { FormSheet: undefined; Modal: undefined; NestedStackHost: undefined; + TabsHost: undefined; + TabsHome: undefined; + TabsModal: undefined; } type RouteProps = { @@ -18,7 +22,7 @@ type RouteProps = { } const Stack = createNativeStackNavigator(); -// const Stack = createNativeStackNavigator(); +const Tabs = createBottomTabNavigator(); function Home({ navigation }: RouteProps<'Home'>): React.JSX.Element { return ( @@ -56,7 +60,7 @@ function FormSheet({ navigation }: RouteProps<'FormSheet'> | RouteProps<'Modal'>