diff --git a/example/src/Screens/AuthFlow.tsx b/example/src/Screens/AuthFlow.tsx deleted file mode 100644 index 45d145334a..0000000000 --- a/example/src/Screens/AuthFlow.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import * as React from 'react'; -import { View, TextInput, ActivityIndicator, StyleSheet } from 'react-native'; -import { Title, Button } from 'react-native-paper'; -import { useTheme, ParamListBase } from '@react-navigation/native'; -import { - createStackNavigator, - StackScreenProps, -} from '@react-navigation/stack'; -import { HeaderBackButton } from '@react-navigation/elements'; - -type AuthStackParams = { - Splash: undefined; - Home: undefined; - SignIn: undefined; - PostSignOut: undefined; -}; - -const AUTH_CONTEXT_ERROR = - 'Authentication context not found. Have your wrapped your components with AuthContext.Consumer?'; - -const AuthContext = React.createContext<{ - signIn: () => void; - signOut: () => void; -}>({ - signIn: () => { - throw new Error(AUTH_CONTEXT_ERROR); - }, - signOut: () => { - throw new Error(AUTH_CONTEXT_ERROR); - }, -}); - -const SplashScreen = () => { - const { colors } = useTheme(); - - return ( - - - - ); -}; - -const SignInScreen = () => { - const { signIn } = React.useContext(AuthContext); - const { colors } = useTheme(); - - return ( - - - - - - ); -}; - -const HomeScreen = () => { - const { signOut } = React.useContext(AuthContext); - - return ( - - Signed in successfully 🎉 - - - ); -}; - -const SimpleStack = createStackNavigator(); - -type State = { - isLoading: boolean; - isSignout: boolean; - userToken: undefined | string; -}; - -type Action = - | { type: 'RESTORE_TOKEN'; token: undefined | string } - | { type: 'SIGN_IN'; token: string } - | { type: 'SIGN_OUT' }; - -export default function SimpleStackScreen({ - navigation, -}: StackScreenProps) { - const [state, dispatch] = React.useReducer>( - (prevState, action) => { - switch (action.type) { - case 'RESTORE_TOKEN': - return { - ...prevState, - userToken: action.token, - isLoading: false, - }; - case 'SIGN_IN': - return { - ...prevState, - isSignout: false, - userToken: action.token, - }; - case 'SIGN_OUT': - return { - ...prevState, - isSignout: true, - userToken: undefined, - }; - } - }, - { - isLoading: true, - isSignout: false, - userToken: undefined, - } - ); - - React.useEffect(() => { - const timer = setTimeout(() => { - dispatch({ type: 'RESTORE_TOKEN', token: undefined }); - }, 1000); - - return () => clearTimeout(timer); - }, []); - - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - }); - }, [navigation]); - - const authContext = React.useMemo( - () => ({ - signIn: () => dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' }), - signOut: () => dispatch({ type: 'SIGN_OUT' }), - }), - [] - ); - - if (state.isLoading) { - return ; - } - - return ( - - ( - navigation.goBack()} /> - ), - }} - > - {state.userToken === undefined ? ( - - ) : ( - - )} - - - ); -} - -const styles = StyleSheet.create({ - content: { - flex: 1, - padding: 16, - justifyContent: 'center', - }, - input: { - margin: 8, - padding: 10, - borderRadius: 3, - borderWidth: StyleSheet.hairlineWidth, - borderColor: 'rgba(0, 0, 0, 0.08)', - }, - button: { - margin: 8, - }, - text: { - textAlign: 'center', - margin: 8, - }, -}); diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx deleted file mode 100644 index 748d853a89..0000000000 --- a/example/src/Screens/BottomTabs.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; -import { Platform } from 'react-native'; -import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -import { - getFocusedRouteNameFromRoute, - ParamListBase, - NavigatorScreenParams, -} from '@react-navigation/native'; -import type { StackScreenProps } from '@react-navigation/stack'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { HeaderBackButton } from '@react-navigation/elements'; -import TouchableBounce from '../Shared/TouchableBounce'; -import Albums from '../Shared/Albums'; -import Contacts from '../Shared/Contacts'; -import Chat from '../Shared/Chat'; -import SimpleStackScreen, { SimpleStackParams } from './SimpleStack'; - -const getTabBarIcon = (name: string) => ({ - color, - size, -}: { - color: string; - size: number; -}) => ; - -type BottomTabParams = { - TabStack: NavigatorScreenParams; - TabAlbums: undefined; - TabContacts: undefined; - TabChat: undefined; -}; - -const BottomTabs = createBottomTabNavigator(); - -export default function BottomTabsScreen({ - navigation, - route, -}: StackScreenProps) { - const routeName = getFocusedRouteNameFromRoute(route) ?? 'Article'; - - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - title: routeName, - }); - }, [navigation, routeName]); - - return ( - ( - - ), - tabBarButton: - Platform.OS === 'web' - ? undefined - : (props) => , - }} - > - - - - - - ); -} diff --git a/example/src/Screens/DynamicTabs.tsx b/example/src/Screens/DynamicTabs.tsx deleted file mode 100644 index d9813715f4..0000000000 --- a/example/src/Screens/DynamicTabs.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import { View, StyleSheet } from 'react-native'; -import { Title, Button } from 'react-native-paper'; -import Feather from 'react-native-vector-icons/Feather'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; - -type BottomTabParams = { - [key: string]: undefined; -}; - -const BottomTabs = createBottomTabNavigator(); - -export default function BottomTabsScreen() { - const [tabs, setTabs] = React.useState([0, 1]); - - return ( - - {tabs.map((i) => ( - ( - - ), - }} - > - {() => ( - - Tab {i} - - - - )} - - ))} - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, -}); diff --git a/example/src/Screens/LinkComponent.tsx b/example/src/Screens/LinkComponent.tsx deleted file mode 100644 index a1bd0a548c..0000000000 --- a/example/src/Screens/LinkComponent.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import * as React from 'react'; -import { View, StyleSheet, ScrollView, Platform } from 'react-native'; -import { Button } from 'react-native-paper'; -import { - Link, - StackActions, - ParamListBase, - useLinkProps, -} from '@react-navigation/native'; -import { - createStackNavigator, - StackScreenProps, -} from '@react-navigation/stack'; -import Article from '../Shared/Article'; -import Albums from '../Shared/Albums'; - -type SimpleStackParams = { - Article: { author: string }; - Albums: undefined; -}; - -const scrollEnabled = Platform.select({ web: true, default: false }); - -const LinkButton = ({ - to, - ...rest -}: React.ComponentProps & { to: string }) => { - const props = useLinkProps({ to }); - - return - -
- - ); -}; - -const AlbumsScreen = ({ navigation }: StackScreenProps) => { - return ( - - - - Go to /link-component/article - - - Go to /link-component/article - - - - - - ); -}; - -const SimpleStack = createStackNavigator(); - -type Props = Partial> & - StackScreenProps; - -export default function SimpleStackScreen({ navigation, ...rest }: Props) { - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - }); - }, [navigation]); - - return ( - - ({ - title: `Article by ${route.params.author}`, - })} - initialParams={{ author: 'Gandalf' }} - /> - - - ); -} - -const styles = StyleSheet.create({ - buttons: { - padding: 8, - }, - button: { - margin: 8, - }, -}); diff --git a/example/src/Screens/MasterDetail.tsx b/example/src/Screens/MasterDetail.tsx deleted file mode 100644 index a1af18d4d7..0000000000 --- a/example/src/Screens/MasterDetail.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import * as React from 'react'; -import { Dimensions, ScaledSize } from 'react-native'; -import { Appbar } from 'react-native-paper'; -import { - useTheme, - useNavigation, - ParamListBase, -} from '@react-navigation/native'; -import { - createDrawerNavigator, - DrawerScreenProps, - DrawerContent, - DrawerContentComponentProps, -} from '@react-navigation/drawer'; -import type { StackScreenProps } from '@react-navigation/stack'; -import Article from '../Shared/Article'; -import Albums from '../Shared/Albums'; -import NewsFeed from '../Shared/NewsFeed'; - -type DrawerParams = { - Article: undefined; - NewsFeed: undefined; - Albums: undefined; -}; - -const useIsLargeScreen = () => { - const [dimensions, setDimensions] = React.useState(Dimensions.get('window')); - - React.useEffect(() => { - const onDimensionsChange = ({ window }: { window: ScaledSize }) => { - setDimensions(window); - }; - - Dimensions.addEventListener('change', onDimensionsChange); - - return () => Dimensions.removeEventListener('change', onDimensionsChange); - }, []); - - return dimensions.width > 414; -}; - -const Header = ({ - onGoBack, - title, -}: { - onGoBack: () => void; - title: string; -}) => { - const { colors } = useTheme(); - const isLargeScreen = useIsLargeScreen(); - - return ( - - {isLargeScreen ? null : } - - - ); -}; - -const ArticleScreen = ({ - navigation, -}: DrawerScreenProps) => { - return ( - <> -
navigation.toggleDrawer()} /> -
- - ); -}; - -const NewsFeedScreen = ({ - navigation, -}: DrawerScreenProps) => { - return ( - <> -
navigation.toggleDrawer()} /> - - - ); -}; - -const AlbumsScreen = ({ - navigation, -}: DrawerScreenProps) => { - return ( - <> -
navigation.toggleDrawer()} /> - - - ); -}; - -const CustomDrawerContent = (props: DrawerContentComponentProps) => { - const { colors } = useTheme(); - const navigation = useNavigation(); - - return ( - <> - - navigation.goBack()} /> - - - - - ); -}; - -const Drawer = createDrawerNavigator(); - -type Props = Partial> & - StackScreenProps; - -export default function DrawerScreen({ navigation, ...rest }: Props) { - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - gestureEnabled: false, - }); - }, [navigation]); - - const isLargeScreen = useIsLargeScreen(); - - return ( - } - screenOptions={{ - headerShown: false, - drawerType: isLargeScreen ? 'permanent' : 'back', - drawerStyle: isLargeScreen ? null : { width: '100%' }, - drawerContentContainerStyle: { paddingTop: 4 }, - overlayColor: 'transparent', - }} - {...rest} - > - - - - - ); -} diff --git a/example/src/Screens/MaterialBottomTabs.tsx b/example/src/Screens/MaterialBottomTabs.tsx deleted file mode 100644 index ff073a67a6..0000000000 --- a/example/src/Screens/MaterialBottomTabs.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; -import { StyleSheet } from 'react-native'; -import type { NavigatorScreenParams } from '@react-navigation/native'; -import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; -import Albums from '../Shared/Albums'; -import Contacts from '../Shared/Contacts'; -import Chat from '../Shared/Chat'; -import SimpleStackScreen, { SimpleStackParams } from './SimpleStack'; - -type MaterialBottomTabParams = { - TabStack: NavigatorScreenParams; - TabAlbums: undefined; - TabContacts: undefined; - TabChat: undefined; -}; - -const MaterialBottomTabs = createMaterialBottomTabNavigator(); - -export default function MaterialBottomTabsScreen() { - return ( - - - {(props) => ( - - )} - - - - - - ); -} - -const styles = StyleSheet.create({ - tabBar: { - backgroundColor: 'white', - }, -}); diff --git a/example/src/Screens/MaterialTopTabs.tsx b/example/src/Screens/MaterialTopTabs.tsx deleted file mode 100644 index 9e7343a48b..0000000000 --- a/example/src/Screens/MaterialTopTabs.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import type { ParamListBase } from '@react-navigation/native'; -import type { StackScreenProps } from '@react-navigation/stack'; -import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; -import Albums from '../Shared/Albums'; -import Contacts from '../Shared/Contacts'; -import Chat from '../Shared/Chat'; - -type MaterialTopTabParams = { - Albums: undefined; - Contacts: undefined; - Chat: undefined; -}; - -const MaterialTopTabs = createMaterialTopTabNavigator(); - -export default function MaterialTopTabsScreen({ - navigation, -}: StackScreenProps) { - React.useLayoutEffect(() => { - navigation.setOptions({ - cardStyle: { flex: 1 }, - }); - }, [navigation]); - - return ( - - - - - - ); -} diff --git a/example/src/Screens/MixedHeaderMode.tsx b/example/src/Screens/MixedHeaderMode.tsx deleted file mode 100644 index 687a2826e5..0000000000 --- a/example/src/Screens/MixedHeaderMode.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import * as React from 'react'; -import { View, Platform, StyleSheet, ScrollView } from 'react-native'; -import { Button } from 'react-native-paper'; -import type { ParamListBase } from '@react-navigation/native'; -import { - createStackNavigator, - StackScreenProps, - TransitionPresets, - HeaderStyleInterpolators, -} from '@react-navigation/stack'; -import Article from '../Shared/Article'; -import Albums from '../Shared/Albums'; -import NewsFeed from '../Shared/NewsFeed'; - -export type SimpleStackParams = { - Article: { author: string } | undefined; - NewsFeed: { date: number }; - Albums: undefined; -}; - -const scrollEnabled = Platform.select({ web: true, default: false }); - -const ArticleScreen = ({ - navigation, - route, -}: StackScreenProps) => { - return ( - - - - - -
- - ); -}; - -const NewsFeedScreen = ({ - route, - navigation, -}: StackScreenProps) => { - return ( - - - - - - - - ); -}; - -const AlbumsScreen = ({ - navigation, -}: StackScreenProps) => { - return ( - - - - - - - - ); -}; - -const SimpleStack = createStackNavigator(); - -export default function SimpleStackScreen({ - navigation, -}: StackScreenProps) { - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - }); - }, [navigation]); - - return ( - - ({ - title: `Article by ${route.params?.author ?? 'Unknown'}`, - })} - initialParams={{ author: 'Gandalf' }} - /> - - - - ); -} - -const styles = StyleSheet.create({ - buttons: { - flexDirection: 'row', - padding: 8, - }, - button: { - margin: 8, - }, -}); diff --git a/example/src/Screens/ModalStack.tsx b/example/src/Screens/ModalStack.tsx deleted file mode 100644 index 279d6a1e26..0000000000 --- a/example/src/Screens/ModalStack.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from 'react'; -import { View, StyleSheet, ScrollView, Platform } from 'react-native'; -import { Button } from 'react-native-paper'; -import type { ParamListBase } from '@react-navigation/native'; -import { - createStackNavigator, - StackScreenProps, -} from '@react-navigation/stack'; -import Article from '../Shared/Article'; -import Albums from '../Shared/Albums'; - -type ModalStackParams = { - Article: { author: string }; - Albums: undefined; -}; - -const scrollEnabled = Platform.select({ web: true, default: false }); - -const ArticleScreen = ({ - navigation, - route, -}: StackScreenProps) => { - return ( - - - - - -
- - ); -}; - -const AlbumsScreen = ({ navigation }: StackScreenProps) => { - return ( - - - - - - - - ); -}; - -const ModalStack = createStackNavigator(); - -type Props = StackScreenProps; - -export default function ModalStackScreen({ navigation }: Props) { - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - }); - }, [navigation]); - - return ( - - ({ - title: `Article by ${route.params.author}`, - })} - initialParams={{ author: 'Gandalf' }} - /> - - - ); -} - -const styles = StyleSheet.create({ - buttons: { - flexDirection: 'row', - padding: 8, - }, - button: { - margin: 8, - }, -}); diff --git a/example/src/Screens/NotFound.tsx b/example/src/Screens/NotFound.tsx deleted file mode 100644 index 144c40d1a3..0000000000 --- a/example/src/Screens/NotFound.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import { Button } from 'react-native-paper'; -import type { StackScreenProps } from '@react-navigation/stack'; - -const NotFoundScreen = ({ - route, - navigation, -}: StackScreenProps<{ Home: undefined }>) => { - return ( - - 404 Not Found ({route.path}) - - - ); -}; - -export default NotFoundScreen; - -const styles = StyleSheet.create({ - title: { - fontSize: 36, - }, - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - padding: 8, - }, - button: { - margin: 24, - }, -}); diff --git a/example/src/Screens/PreventRemove.tsx b/example/src/Screens/PreventRemove.tsx deleted file mode 100644 index c14a8660d7..0000000000 --- a/example/src/Screens/PreventRemove.tsx +++ /dev/null @@ -1,180 +0,0 @@ -import * as React from 'react'; -import { - Alert, - View, - TextInput, - ScrollView, - StyleSheet, - Platform, -} from 'react-native'; -import { Button } from 'react-native-paper'; -import { - useTheme, - CommonActions, - ParamListBase, - NavigationAction, -} from '@react-navigation/native'; -import { - createStackNavigator, - StackScreenProps, -} from '@react-navigation/stack'; -import Article from '../Shared/Article'; - -type PreventRemoveParams = { - Article: { author: string }; - Input: undefined; -}; - -const scrollEnabled = Platform.select({ web: true, default: false }); - -const ArticleScreen = ({ - navigation, - route, -}: StackScreenProps) => { - return ( - - - - - -
- - ); -}; - -const InputScreen = ({ - navigation, -}: StackScreenProps) => { - const [text, setText] = React.useState(''); - const { colors } = useTheme(); - - const hasUnsavedChanges = Boolean(text); - - React.useEffect( - () => - navigation.addListener('beforeRemove', (e) => { - const action: NavigationAction & { payload?: { confirmed?: boolean } } = - e.data.action; - - if (!hasUnsavedChanges || action.payload?.confirmed) { - return; - } - - e.preventDefault(); - - if (Platform.OS === 'web') { - const discard = confirm( - 'You have unsaved changes. Discard them and leave the screen?' - ); - - if (discard) { - navigation.dispatch(action); - } - } else { - Alert.alert( - 'Discard changes?', - 'You have unsaved changes. Discard them and leave the screen?', - [ - { text: "Don't leave", style: 'cancel', onPress: () => {} }, - { - text: 'Discard', - style: 'destructive', - onPress: () => navigation.dispatch(action), - }, - ] - ); - } - }), - [hasUnsavedChanges, navigation] - ); - - return ( - - - - - - ); -}; - -const SimpleStack = createStackNavigator(); - -type Props = StackScreenProps; - -export default function SimpleStackScreen({ navigation }: Props) { - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - }); - }, [navigation]); - - return ( - - - - - ); -} - -const styles = StyleSheet.create({ - content: { - flex: 1, - padding: 16, - }, - input: { - margin: 8, - padding: 10, - borderRadius: 3, - borderWidth: StyleSheet.hairlineWidth, - borderColor: 'rgba(0, 0, 0, 0.08)', - }, - buttons: { - flexDirection: 'row', - padding: 8, - }, - button: { - margin: 8, - }, -}); diff --git a/example/src/Screens/SimpleStack.tsx b/example/src/Screens/SimpleStack.tsx deleted file mode 100644 index 841ae6bb0b..0000000000 --- a/example/src/Screens/SimpleStack.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import * as React from 'react'; -import { View, Platform, StyleSheet, ScrollView } from 'react-native'; -import { Button } from 'react-native-paper'; -import type { ParamListBase } from '@react-navigation/native'; -import { - createStackNavigator, - StackNavigationOptions, - StackScreenProps, -} from '@react-navigation/stack'; -import Article from '../Shared/Article'; -import Albums from '../Shared/Albums'; -import NewsFeed from '../Shared/NewsFeed'; - -export type SimpleStackParams = { - Article: { author: string } | undefined; - NewsFeed: { date: number }; - Albums: undefined; -}; - -const scrollEnabled = Platform.select({ web: true, default: false }); - -const ArticleScreen = ({ - navigation, - route, -}: StackScreenProps) => { - return ( - - - - - -
- - ); -}; - -const NewsFeedScreen = ({ - route, - navigation, -}: StackScreenProps) => { - return ( - - - - - - - - ); -}; - -const AlbumsScreen = ({ - navigation, -}: StackScreenProps) => { - return ( - - - - - - - - ); -}; - -const SimpleStack = createStackNavigator(); - -export default function SimpleStackScreen({ - navigation, - screenOptions, -}: StackScreenProps & { - screenOptions?: StackNavigationOptions; -}) { - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - }); - }, [navigation]); - - return ( - - ({ - title: `Article by ${route.params?.author ?? 'Unknown'}`, - })} - initialParams={{ author: 'Gandalf' }} - /> - - - - ); -} - -const styles = StyleSheet.create({ - buttons: { - flexDirection: 'row', - padding: 8, - }, - button: { - margin: 8, - }, -}); diff --git a/example/src/Screens/StackHeaderCustomization.tsx b/example/src/Screens/StackHeaderCustomization.tsx deleted file mode 100644 index 88b6d90987..0000000000 --- a/example/src/Screens/StackHeaderCustomization.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import * as React from 'react'; -import { - Animated, - View, - StyleSheet, - ScrollView, - Alert, - Platform, -} from 'react-native'; -import { Button, Appbar } from 'react-native-paper'; -import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -import { useTheme, ParamListBase } from '@react-navigation/native'; -import { - createStackNavigator, - StackScreenProps, - Header, - StackHeaderProps, -} from '@react-navigation/stack'; -import { HeaderBackground, useHeaderHeight } from '@react-navigation/elements'; -import BlurView from '../Shared/BlurView'; -import Article from '../Shared/Article'; -import Albums from '../Shared/Albums'; - -type SimpleStackParams = { - Article: { author: string }; - Albums: undefined; -}; - -const scrollEnabled = Platform.select({ web: true, default: false }); - -const ArticleScreen = ({ - navigation, - route, -}: StackScreenProps) => { - return ( - - - - - -
- - ); -}; - -const AlbumsScreen = ({ navigation }: StackScreenProps) => { - const headerHeight = useHeaderHeight(); - - return ( - - - - - - - - ); -}; - -const SimpleStack = createStackNavigator(); - -type Props = StackScreenProps; - -function CustomHeader(props: StackHeaderProps) { - const { current, next } = props.progress; - - const progress = Animated.add(current, next || 0); - const opacity = progress.interpolate({ - inputRange: [0, 1, 2], - outputRange: [0, 1, 0], - }); - - return ( - <> -
- - Why hello there, pardner! - - - ); -} - -export default function HeaderCustomizationScreen({ navigation }: Props) { - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - }); - }, [navigation]); - - const { colors, dark } = useTheme(); - const [headerTitleCentered, setHeaderTitleCentered] = React.useState(true); - - return ( - - ({ - title: `Article by ${route.params?.author}`, - header: (props) => , - headerTintColor: '#fff', - headerStyle: { backgroundColor: '#ff005d' }, - headerBackTitleVisible: false, - headerTitleAlign: headerTitleCentered ? 'center' : 'left', - headerBackImage: ({ tintColor }) => ( - - ), - headerRight: ({ tintColor }) => ( - { - setHeaderTitleCentered((centered) => !centered); - Alert.alert( - 'Never gonna give you up!', - 'Never gonna let you down! Never gonna run around and desert you!' - ); - }} - /> - ), - })} - initialParams={{ author: 'Gandalf' }} - /> - ( - - - - ), - }} - /> - - ); -} - -const styles = StyleSheet.create({ - buttons: { - flexDirection: 'row', - padding: 8, - }, - button: { - margin: 8, - }, - banner: { - textAlign: 'center', - color: 'tomato', - backgroundColor: 'papayawhip', - padding: 4, - }, -}); diff --git a/example/src/Screens/StackTransparent.tsx b/example/src/Screens/StackTransparent.tsx deleted file mode 100644 index 64c0127a23..0000000000 --- a/example/src/Screens/StackTransparent.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import * as React from 'react'; -import { View, StyleSheet, ScrollView, Platform } from 'react-native'; -import { Button, Paragraph } from 'react-native-paper'; -import { ParamListBase, useTheme } from '@react-navigation/native'; -import { - createStackNavigator, - StackScreenProps, -} from '@react-navigation/stack'; -import Article from '../Shared/Article'; - -type SimpleStackParams = { - Article: { author: string }; - Dialog: undefined; -}; - -const scrollEnabled = Platform.select({ web: true, default: false }); - -const ArticleScreen = ({ - navigation, - route, -}: StackScreenProps) => { - return ( - - - - - -
- - ); -}; - -const DialogScreen = ({ navigation }: StackScreenProps) => { - const { colors } = useTheme(); - - return ( - - - - Mise en place is a French term that literally means “put in place.” It - also refers to a way cooks in professional kitchens and restaurants - set up their work stations—first by gathering all ingredients for a - recipes, partially preparing them (like measuring out and chopping), - and setting them all near each other. Setting up mise en place before - cooking is another top tip for home cooks, as it seriously helps with - organization. It’ll pretty much guarantee you never forget to add an - ingredient and save you time from running back and forth from the - pantry ten times. - - - - - ); -}; - -const SimpleStack = createStackNavigator(); - -type Props = Partial> & - StackScreenProps; - -export default function SimpleStackScreen({ navigation, ...rest }: Props) { - React.useLayoutEffect(() => { - navigation.setOptions({ - headerShown: false, - }); - }, [navigation]); - - return ( - - - ({ - cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), - transform: [ - { - scale: progress.interpolate({ - inputRange: [0, 1], - outputRange: [0.9, 1], - extrapolate: 'clamp', - }), - }, - ], - }, - overlayStyle: { - opacity: progress.interpolate({ - inputRange: [0, 1], - outputRange: [0, 0.5], - extrapolate: 'clamp', - }), - }, - }), - }} - /> - - ); -} - -const styles = StyleSheet.create({ - buttons: { - flexDirection: 'row', - padding: 8, - }, - button: { - margin: 8, - }, - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - dialog: { - padding: 16, - width: '90%', - maxWidth: 400, - borderRadius: 3, - }, - close: { - alignSelf: 'flex-end', - }, -}); diff --git a/example/src/Shared/Albums.tsx b/example/src/Shared/Albums.tsx deleted file mode 100644 index 65f10ad220..0000000000 --- a/example/src/Shared/Albums.tsx +++ /dev/null @@ -1,106 +0,0 @@ -/* eslint-disable import/no-commonjs */ - -import * as React from 'react'; -import { - View, - Image, - ScrollView, - StyleSheet, - ScrollViewProps, - Dimensions, - Platform, - ScaledSize, -} from 'react-native'; -import { useScrollToTop } from '@react-navigation/native'; - -const COVERS = [ - require('../../assets/album-art-01.jpg'), - require('../../assets/album-art-02.jpg'), - require('../../assets/album-art-03.jpg'), - require('../../assets/album-art-04.jpg'), - require('../../assets/album-art-05.jpg'), - require('../../assets/album-art-06.jpg'), - require('../../assets/album-art-07.jpg'), - require('../../assets/album-art-08.jpg'), - require('../../assets/album-art-09.jpg'), - require('../../assets/album-art-10.jpg'), - require('../../assets/album-art-11.jpg'), - require('../../assets/album-art-12.jpg'), - require('../../assets/album-art-13.jpg'), - require('../../assets/album-art-14.jpg'), - require('../../assets/album-art-15.jpg'), - require('../../assets/album-art-16.jpg'), - require('../../assets/album-art-17.jpg'), - require('../../assets/album-art-18.jpg'), - require('../../assets/album-art-19.jpg'), - require('../../assets/album-art-20.jpg'), - require('../../assets/album-art-21.jpg'), - require('../../assets/album-art-22.jpg'), - require('../../assets/album-art-23.jpg'), - require('../../assets/album-art-24.jpg'), -]; - -export default function Albums(props: Partial) { - const [dimensions, setDimensions] = React.useState(Dimensions.get('window')); - - React.useEffect(() => { - const onDimensionsChange = ({ window }: { window: ScaledSize }) => { - setDimensions(window); - }; - - Dimensions.addEventListener('change', onDimensionsChange); - - return () => Dimensions.removeEventListener('change', onDimensionsChange); - }, []); - - const ref = React.useRef(null); - - useScrollToTop(ref); - - const itemSize = dimensions.width / Math.floor(dimensions.width / 150); - - return ( - - {COVERS.map((source, i) => ( - - - - ))} - - ); -} - -const styles = StyleSheet.create({ - ...Platform.select({ - web: { - content: { - display: 'grid' as 'none', - gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', - }, - item: { - width: '100%', - }, - }, - default: { - content: { - flexDirection: 'row', - flexWrap: 'wrap', - }, - }, - }), - photo: { - flex: 1, - resizeMode: 'cover', - paddingTop: '100%', - }, -}); diff --git a/example/src/Shared/Article.tsx b/example/src/Shared/Article.tsx deleted file mode 100644 index 66ce9be16d..0000000000 --- a/example/src/Shared/Article.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import * as React from 'react'; -import { - View, - Text, - Image, - ScrollView, - StyleSheet, - ScrollViewProps, -} from 'react-native'; -import { useScrollToTop, useTheme } from '@react-navigation/native'; - -type Props = Partial & { - date?: string; - author?: { - name: string; - }; -}; - -export default function Article({ - date = '1st Jan 2025', - author = { - name: 'Knowledge Bot', - }, - ...rest -}: Props) { - const ref = React.useRef(null); - - useScrollToTop(ref); - - const { colors } = useTheme(); - - return ( - - - - - - {author.name} - - {date} - - - Lorem Ipsum - - Contrary to popular belief, Lorem Ipsum is not simply random text. It - has roots in a piece of classical Latin literature from 45 BC, making it - over 2000 years old. - - - - Richard McClintock, a Latin professor at Hampden-Sydney College in - Virginia, looked up one of the more obscure Latin words, consectetur, - from a Lorem Ipsum passage, and going through the cites of the word in - classical literature, discovered the undoubtable source. - - - Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus - Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, - written in 45 BC. This book is a treatise on the theory of ethics, very - popular during the Renaissance. The first line of Lorem Ipsum, - "Lorem ipsum dolor sit amet..", comes from a line in section - 1.10.32. - - - ); -} - -const styles = StyleSheet.create({ - content: { - paddingVertical: 16, - }, - author: { - flexDirection: 'row', - marginVertical: 8, - marginHorizontal: 16, - }, - meta: { - marginHorizontal: 8, - justifyContent: 'center', - }, - name: { - fontWeight: 'bold', - fontSize: 16, - lineHeight: 24, - }, - timestamp: { - opacity: 0.5, - fontSize: 14, - lineHeight: 21, - }, - avatar: { - height: 48, - width: 48, - borderRadius: 24, - }, - title: { - fontWeight: 'bold', - fontSize: 36, - marginVertical: 8, - marginHorizontal: 16, - }, - paragraph: { - fontSize: 16, - lineHeight: 24, - marginVertical: 8, - marginHorizontal: 16, - }, - image: { - width: '100%', - height: 200, - resizeMode: 'cover', - marginVertical: 8, - }, -}); diff --git a/example/src/Shared/BlurView.native.tsx b/example/src/Shared/BlurView.native.tsx deleted file mode 100644 index 49226dfd31..0000000000 --- a/example/src/Shared/BlurView.native.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { BlurView } from 'expo-blur'; - -export default BlurView; diff --git a/example/src/Shared/BlurView.tsx b/example/src/Shared/BlurView.tsx deleted file mode 100644 index 4aaf81a737..0000000000 --- a/example/src/Shared/BlurView.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { View, ViewProps } from 'react-native'; - -type Props = ViewProps & { - tint: 'light' | 'dark'; - intensity: number; -}; - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export default function BlurView({ tint, intensity, ...rest }: Props) { - return ; -} diff --git a/example/src/Shared/Chat.tsx b/example/src/Shared/Chat.tsx deleted file mode 100644 index 81153745fa..0000000000 --- a/example/src/Shared/Chat.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import * as React from 'react'; -import { - View, - Image, - Text, - TextInput, - ScrollView, - StyleSheet, - ScrollViewProps, -} from 'react-native'; -import { useScrollToTop, useTheme } from '@react-navigation/native'; -import Color from 'color'; - -const MESSAGES = [ - 'okay', - 'sudo make me a sandwich', - 'what? make it yourself', - 'make me a sandwich', -]; - -export default function Chat(props: Partial) { - const ref = React.useRef(null); - - useScrollToTop(ref); - - const { colors } = useTheme(); - - return ( - - - {MESSAGES.map((text, i) => { - const odd = i % 2; - - return ( - - - - - {text} - - - - ); - })} - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, - inverted: { - transform: [{ scaleY: -1 }], - }, - content: { - padding: 16, - }, - even: { - flexDirection: 'row', - }, - odd: { - flexDirection: 'row-reverse', - }, - avatar: { - marginVertical: 8, - marginHorizontal: 6, - height: 40, - width: 40, - borderRadius: 20, - borderColor: 'rgba(0, 0, 0, .16)', - borderWidth: StyleSheet.hairlineWidth, - }, - bubble: { - marginVertical: 8, - marginHorizontal: 6, - paddingVertical: 12, - paddingHorizontal: 16, - borderRadius: 20, - }, - input: { - height: 48, - paddingVertical: 12, - paddingHorizontal: 24, - }, -}); diff --git a/example/src/Shared/Contacts.tsx b/example/src/Shared/Contacts.tsx deleted file mode 100644 index 238a5983ee..0000000000 --- a/example/src/Shared/Contacts.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import * as React from 'react'; -import { View, Text, FlatList, StyleSheet } from 'react-native'; -import { useScrollToTop, useTheme } from '@react-navigation/native'; - -type Item = { name: string; number: number }; - -const CONTACTS: Item[] = [ - { name: 'Marissa Castillo', number: 7766398169 }, - { name: 'Denzel Curry', number: 9394378449 }, - { name: 'Miles Ferguson', number: 8966872888 }, - { name: 'Desiree Webster', number: 6818656371 }, - { name: 'Samantha Young', number: 6538288534 }, - { name: 'Irene Hunter', number: 2932176249 }, - { name: 'Annie Ryan', number: 4718456627 }, - { name: 'Sasha Oliver', number: 9743195919 }, - { name: 'Jarrod Avila', number: 8339212305 }, - { name: 'Griffin Weaver', number: 6059349721 }, - { name: 'Emilee Moss', number: 7382905180 }, - { name: 'Angelique Oliver', number: 9689298436 }, - { name: 'Emanuel Little', number: 6673376805 }, - { name: 'Wayne Day', number: 6918839582 }, - { name: 'Lauren Reese', number: 4652613201 }, - { name: 'Kailey Ward', number: 2232609512 }, - { name: 'Gabrielle Newman', number: 2837997127 }, - { name: 'Luke Strickland', number: 8404732322 }, - { name: 'Payton Garza', number: 7916140875 }, - { name: 'Anna Moss', number: 3504954657 }, - { name: 'Kailey Vazquez', number: 3002136330 }, - { name: 'Jennifer Coleman', number: 5469629753 }, - { name: 'Cindy Casey', number: 8446175026 }, - { name: 'Dillon Doyle', number: 5614510703 }, - { name: 'Savannah Garcia', number: 5634775094 }, - { name: 'Kailey Hudson', number: 3289239675 }, - { name: 'Ariel Green', number: 2103492196 }, - { name: 'Weston Perez', number: 2984221823 }, - { name: 'Kari Juarez', number: 9502125065 }, - { name: 'Sara Sanders', number: 7696668206 }, - { name: 'Griffin Le', number: 3396937040 }, - { name: 'Fernando Valdez', number: 9124257306 }, - { name: 'Taylor Marshall', number: 9656072372 }, - { name: 'Elias Dunn', number: 9738536473 }, - { name: 'Diane Barrett', number: 6886824829 }, - { name: 'Samuel Freeman', number: 5523948094 }, - { name: 'Irene Garza', number: 2077694008 }, - { name: 'Devante Alvarez', number: 9897002645 }, - { name: 'Sydney Floyd', number: 6462897254 }, - { name: 'Toni Dixon', number: 3775448213 }, - { name: 'Anastasia Spencer', number: 4548212752 }, - { name: 'Reid Cortez', number: 6668056507 }, - { name: 'Ramon Duncan', number: 8889157751 }, - { name: 'Kenny Moreno', number: 5748219540 }, - { name: 'Shelby Craig', number: 9473708675 }, - { name: 'Jordyn Brewer', number: 7552277991 }, - { name: 'Tanya Walker', number: 4308189657 }, - { name: 'Nolan Figueroa', number: 9173443776 }, - { name: 'Sophia Gibbs', number: 6435942770 }, - { name: 'Vincent Sandoval', number: 2606111495 }, -]; - -const ContactItem = React.memo( - ({ item }: { item: { name: string; number: number } }) => { - const { colors } = useTheme(); - - return ( - - - - {item.name.slice(0, 1).toUpperCase()} - - - - {item.name} - - {item.number} - - - - ); - } -); - -const ItemSeparator = () => { - const { colors } = useTheme(); - - return ( - - ); -}; - -export default function Contacts() { - const ref = React.useRef>(null); - - useScrollToTop(ref); - - const renderItem = ({ item }: { item: Item }) => ; - - return ( - String(i)} - renderItem={renderItem} - ItemSeparatorComponent={ItemSeparator} - /> - ); -} - -const styles = StyleSheet.create({ - item: { - flexDirection: 'row', - alignItems: 'center', - padding: 8, - }, - avatar: { - height: 36, - width: 36, - borderRadius: 18, - backgroundColor: '#e91e63', - alignItems: 'center', - justifyContent: 'center', - }, - letter: { - color: 'white', - fontWeight: 'bold', - }, - details: { - margin: 8, - }, - name: { - fontWeight: 'bold', - fontSize: 14, - }, - number: { - fontSize: 12, - }, - separator: { - height: StyleSheet.hairlineWidth, - }, -}); diff --git a/example/src/Shared/NewsFeed.tsx b/example/src/Shared/NewsFeed.tsx deleted file mode 100644 index 27b331d242..0000000000 --- a/example/src/Shared/NewsFeed.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import * as React from 'react'; -import { - View, - TextInput, - Image, - ScrollView, - StyleSheet, - ScrollViewProps, -} from 'react-native'; -import { useScrollToTop, useTheme } from '@react-navigation/native'; -import { - Card, - Text, - Avatar, - Subheading, - IconButton, - Divider, -} from 'react-native-paper'; -import Color from 'color'; - -type Props = Partial & { - date?: number; -}; - -const Author = () => { - return ( - - - Joke bot - - ); -}; - -const Footer = () => { - return ( - - - - - - ); -}; - -export default function NewsFeed(props: Props) { - const ref = React.useRef(null); - - useScrollToTop(ref); - - const { colors } = useTheme(); - - return ( - - - - - - - - - If you aren't impressed with the picture of the first Black - Hole, you clearly don't understand the gravity of the - situation. - - - -