diff --git a/src/components/Header/Left.tsx b/src/components/Header/Left.tsx index 6d33efa7..40a92e08 100644 --- a/src/components/Header/Left.tsx +++ b/src/components/Header/Left.tsx @@ -1,5 +1,6 @@ import Icon, { IconName } from '@components/Icon' import CustomText from '@components/Text' +import { useNavigation } from '@react-navigation/native' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import React from 'react' @@ -9,7 +10,7 @@ export type Props = { native?: boolean background?: boolean - onPress: () => void + onPress?: () => void } & ({ type?: undefined; content?: IconName } | { type: 'text'; content: string }) const HeaderLeft: React.FC = ({ @@ -19,6 +20,7 @@ const HeaderLeft: React.FC = ({ background = false, onPress }) => { + const navigation = useNavigation() const { colors } = useTheme() const children = () => { @@ -40,7 +42,7 @@ const HeaderLeft: React.FC = ({ return ( navigation.goBack()} children={children()} style={{ flexDirection: 'row', diff --git a/src/components/Selections.tsx b/src/components/Selections.tsx index bbad0a2b..90798492 100644 --- a/src/components/Selections.tsx +++ b/src/components/Selections.tsx @@ -1,18 +1,18 @@ -import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' +import { StyleConstants } from '@utils/styles/constants' import React from 'react' import { Pressable, View } from 'react-native' -import haptics from './haptics' import Icon from './Icon' import { ParseEmojis } from './Parse' import CustomText from './Text' +import haptics from './haptics' export interface Props { title?: string multiple?: boolean options: { selected: boolean; content: string }[] - setOptions: React.Dispatch> + setOptions: React.Dispatch> disabled?: boolean invalid?: boolean } diff --git a/src/screens/Compose/DraftsList.tsx b/src/screens/Compose/DraftsList.tsx index 0d4ea949..23b3bb0b 100644 --- a/src/screens/Compose/DraftsList.tsx +++ b/src/screens/Compose/DraftsList.tsx @@ -1,4 +1,3 @@ -import { HeaderLeft } from '@components/Header' import Icon from '@components/Icon' import { SwipeToActions } from '@components/SwipeToActions' import CustomText from '@components/Text' @@ -7,10 +6,10 @@ import { connectMedia } from '@utils/api/helpers/connect' import apiInstance from '@utils/api/instance' import { ScreenComposeStackScreenProps } from '@utils/navigation/navigators' import { getAccountStorage, setAccountStorage, useAccountStorage } from '@utils/storage/actions' -import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' +import { StyleConstants } from '@utils/styles/constants' import { Image } from 'expo-image' -import React, { useContext, useEffect, useState } from 'react' +import React, { useContext, useState } from 'react' import { useTranslation } from 'react-i18next' import { Dimensions, Modal, Pressable, View } from 'react-native' import ComposeContext from './utils/createContext' @@ -35,13 +34,6 @@ const ComposeDraftsList: React.FC { - navigation.setOptions({ - title: t('content.draftsList.header.title'), - headerLeft: () => navigation.goBack()} /> - }) - }, []) - const { composeDispatch } = useContext(ComposeContext) const [drafts] = useAccountStorage.object('drafts') const [checkingAttachments, setCheckingAttachments] = useState(false) diff --git a/src/screens/Compose/EditAttachment.tsx b/src/screens/Compose/EditAttachment.tsx index 53fdf459..2976aead 100644 --- a/src/screens/Compose/EditAttachment.tsx +++ b/src/screens/Compose/EditAttachment.tsx @@ -38,7 +38,6 @@ const ComposeEditAttachment: React.FC< useEffect(() => { navigation.setOptions({ - title: t('screenCompose:content.editAttachment.header.title'), headerLeft: () => ( > = ({ + }} /> diff --git a/src/screens/Tabs/Local/index.tsx b/src/screens/Tabs/Local/index.tsx index 5c133c94..90e576c7 100644 --- a/src/screens/Tabs/Local/index.tsx +++ b/src/screens/Tabs/Local/index.tsx @@ -4,15 +4,19 @@ import usePopToTop from '@utils/navigation/usePopToTop' import React from 'react' import TabShared from '../Shared' import Root from './Root' +import { HeaderLeft } from '@components/Header' const Stack = createNativeStackNavigator() const TabLocal: React.FC = () => { usePopToTop('Tab-Local-Root') + return ( - + }} + > - {TabShared({ Stack })} + {TabShared(Stack)} ) } diff --git a/src/screens/Tabs/Me/Preferences/Filter.tsx b/src/screens/Tabs/Me/Preferences/Filter.tsx index d01d6ca5..7b4ac85b 100644 --- a/src/screens/Tabs/Me/Preferences/Filter.tsx +++ b/src/screens/Tabs/Me/Preferences/Filter.tsx @@ -51,7 +51,7 @@ const TabMePreferencesFilter: React.FC< const titleState = useState(params.type === 'edit' ? params.filter.title : '') const expirations = ['0', '1800', '3600', '43200', '86400', '604800', '18144000'] as const - const [expiration, setExpiration] = useState('0') + const [expiration, setExpiration] = useState<(typeof expirations)[number]>('0') const [contexts, setContexts] = useState< { @@ -226,8 +226,10 @@ const TabMePreferencesFilter: React.FC< cancelButtonIndex: expirations.length, ...androidActionSheetStyles(colors) }, - (selectedIndex: number) => { - selectedIndex < expirations.length && setExpiration(expirations[selectedIndex]) + selectedIndex => { + selectedIndex && + selectedIndex < expirations.length && + setExpiration(expirations[selectedIndex]) } ) } diff --git a/src/screens/Tabs/Me/Profile/index.tsx b/src/screens/Tabs/Me/Profile/index.tsx index b2f336a5..541249d6 100644 --- a/src/screens/Tabs/Me/Profile/index.tsx +++ b/src/screens/Tabs/Me/Profile/index.tsx @@ -12,7 +12,7 @@ import TabMeProfileRoot from './Root' const Stack = createNativeStackNavigator() -const TabMeProfile: React.FC> = ({ navigation }) => { +const TabMeProfile: React.FC> = ({ navigation }) => { const { t } = useTranslation('screenTabs') const messageRef = useRef(null) diff --git a/src/screens/Tabs/Me/index.tsx b/src/screens/Tabs/Me/index.tsx index bd10f706..4046bbda 100644 --- a/src/screens/Tabs/Me/index.tsx +++ b/src/screens/Tabs/Me/index.tsx @@ -156,7 +156,7 @@ const TabMe: React.FC = () => { })} /> - {TabShared({ Stack })} + {TabShared(Stack)} ) } diff --git a/src/screens/Tabs/Notifications/index.tsx b/src/screens/Tabs/Notifications/index.tsx index a3b93d09..734775ed 100644 --- a/src/screens/Tabs/Notifications/index.tsx +++ b/src/screens/Tabs/Notifications/index.tsx @@ -54,7 +54,7 @@ const TabNotifications: React.FC = () => { component={TabNotificationsFilters} options={{ presentation: 'modal', gestureEnabled: false }} /> - {TabShared({ Stack })} + {TabShared(Stack)} ) } diff --git a/src/screens/Tabs/Public/index.tsx b/src/screens/Tabs/Public/index.tsx index 3135b4b5..203ca841 100644 --- a/src/screens/Tabs/Public/index.tsx +++ b/src/screens/Tabs/Public/index.tsx @@ -12,7 +12,7 @@ const TabPublic: React.FC = () => { return ( - {TabShared({ Stack })} + {TabShared(Stack)} ) } diff --git a/src/screens/Tabs/Shared/Account/index.tsx b/src/screens/Tabs/Shared/Account/index.tsx index ee2f0048..87310348 100644 --- a/src/screens/Tabs/Shared/Account/index.tsx +++ b/src/screens/Tabs/Shared/Account/index.tsx @@ -1,17 +1,17 @@ -import menuAccount from '@components/contextMenu/account' -import menuShare from '@components/contextMenu/share' -import { HeaderLeft, HeaderRight } from '@components/Header' +import { HeaderRight } from '@components/Header' import Icon from '@components/Icon' import CustomText from '@components/Text' import Timeline from '@components/Timeline' +import menuAccount from '@components/contextMenu/account' +import menuShare from '@components/contextMenu/share' import { TabSharedStackScreenProps } from '@utils/navigation/navigators' import { queryClient } from '@utils/queryHooks' import { useAccountQuery } from '@utils/queryHooks/account' import { useRelationshipQuery } from '@utils/queryHooks/relationship' import { QueryKeyTimeline } from '@utils/queryHooks/timeline' import { useAccountStorage } from '@utils/storage/actions' -import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' +import { StyleConstants } from '@utils/styles/constants' import React, { Fragment, useEffect, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { Platform, Pressable, Text, View } from 'react-native' @@ -65,8 +65,6 @@ const TabSharedAccount: React.FC navigation.setOptions({ headerTransparent: true, headerStyle: { backgroundColor: `rgba(255, 255, 255, 0)` }, - title: '', - headerLeft: () => navigation.goBack()} background />, headerRight: () => { return ( diff --git a/src/screens/Tabs/Shared/AccountInLists.tsx b/src/screens/Tabs/Shared/AccountInLists.tsx index 7e93c110..9da80e11 100644 --- a/src/screens/Tabs/Shared/AccountInLists.tsx +++ b/src/screens/Tabs/Shared/AccountInLists.tsx @@ -1,6 +1,5 @@ import Button from '@components/Button' import haptics from '@components/haptics' -import { HeaderRight } from '@components/Header' import { MenuRow } from '@components/Menu' import CustomText from '@components/Text' import { TabSharedStackScreenProps } from '@utils/navigation/navigators' @@ -8,14 +7,13 @@ import { useAccountInListsQuery } from '@utils/queryHooks/account' import { useListAccountsMutation, useListsQuery } from '@utils/queryHooks/lists' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' -import React, { useEffect } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import { SectionList, View } from 'react-native' const TabSharedAccountInLists: React.FC< TabSharedStackScreenProps<'Tab-Shared-Account-In-Lists'> > = ({ - navigation, route: { params: { account } } @@ -23,20 +21,6 @@ const TabSharedAccountInLists: React.FC< const { colors } = useTheme() const { t } = useTranslation(['common', 'screenTabs']) - useEffect(() => { - navigation.setOptions({ - presentation: 'modal', - title: t('screenTabs:shared.accountInLists.name', { username: account.username }), - headerRight: () => ( - navigation.pop(1)} - /> - ) - }) - }, []) - const listsQuery = useListsQuery() const accountInListsQuery = useAccountInListsQuery({ id: account.id }) diff --git a/src/screens/Tabs/Shared/Attachments.tsx b/src/screens/Tabs/Shared/Attachments.tsx index 6e8ed39b..bfa48c37 100644 --- a/src/screens/Tabs/Shared/Attachments.tsx +++ b/src/screens/Tabs/Shared/Attachments.tsx @@ -1,12 +1,7 @@ -import { HeaderLeft } from '@components/Header' -import { ParseEmojis } from '@components/Parse' -import CustomText from '@components/Text' import Timeline from '@components/Timeline' import { TabSharedStackScreenProps } from '@utils/navigation/navigators' import { QueryKeyTimeline } from '@utils/queryHooks/timeline' -import { useTheme } from '@utils/styles/ThemeManager' import React, { useEffect } from 'react' -import { Trans } from 'react-i18next' const TabSharedAttachments: React.FC> = ({ navigation, @@ -14,33 +9,7 @@ const TabSharedAttachments: React.FC { - const { colors } = useTheme() - useEffect(() => { - navigation.setOptions({ - headerLeft: () => navigation.goBack()} background />, - headerTitle: () => ( - - , - - ]} - /> - - ), - headerBackVisible: false - }) navigation.setParams({ queryKey }) }, []) diff --git a/src/screens/Tabs/Shared/Filter.tsx b/src/screens/Tabs/Shared/Filter.tsx index ab152591..d97a196d 100644 --- a/src/screens/Tabs/Shared/Filter.tsx +++ b/src/screens/Tabs/Shared/Filter.tsx @@ -1,6 +1,5 @@ import Button from '@components/Button' import { Filter } from '@components/Filter' -import { HeaderRight } from '@components/Header' import Hr from '@components/Hr' import CustomText from '@components/Text' import { featureCheck } from '@utils/helpers/featureCheck' @@ -8,7 +7,7 @@ import { TabSharedStackScreenProps, useNavState } from '@utils/navigation/naviga import { useFilterMutation, useFiltersQuery } from '@utils/queryHooks/filters' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' -import React, { useEffect } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import { SectionList, View } from 'react-native' @@ -24,19 +23,6 @@ const TabSharedFilter: React.FC> const { colors } = useTheme() const { t } = useTranslation(['common', 'screenTabs']) - useEffect(() => { - navigation.setOptions({ - title: t('screenTabs:shared.filter.name'), - headerRight: () => ( - navigation.goBack()} - /> - ) - }) - }, []) - const { data, isFetching, refetch } = useFiltersQuery<'v2'>({ version: 'v2' }) const sections = [ { diff --git a/src/screens/Tabs/Shared/Hashtag.tsx b/src/screens/Tabs/Shared/Hashtag.tsx index 6a1d3f58..f992fe93 100644 --- a/src/screens/Tabs/Shared/Hashtag.tsx +++ b/src/screens/Tabs/Shared/Hashtag.tsx @@ -1,5 +1,5 @@ import menuHashtag from '@components/contextMenu/hashtag' -import { HeaderLeft, HeaderRight } from '@components/Header' +import { HeaderRight } from '@components/Header' import Timeline from '@components/Timeline' import { featureCheck } from '@utils/helpers/featureCheck' import { TabSharedStackScreenProps } from '@utils/navigation/navigators' @@ -20,10 +20,6 @@ const TabSharedHashtag: React.FC const mHashtag = menuHashtag({ tag_name, queryKey }) useEffect(() => { - navigation.setOptions({ - headerLeft: () => navigation.goBack()} />, - title: `#${decodeURIComponent(tag_name)}` - }) navigation.setParams({ queryKey: queryKey }) }, []) diff --git a/src/screens/Tabs/Shared/History.tsx b/src/screens/Tabs/Shared/History.tsx index fdfc4720..99ca0f9c 100644 --- a/src/screens/Tabs/Shared/History.tsx +++ b/src/screens/Tabs/Shared/History.tsx @@ -1,4 +1,3 @@ -import { HeaderLeft } from '@components/Header' import Icon from '@components/Icon' import { ParseEmojis } from '@components/Parse' import ComponentSeparator from '@components/Separator' @@ -12,8 +11,7 @@ import { useStatusHistory } from '@utils/queryHooks/statusesHistory' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import { diffChars, diffWords } from 'diff' -import React, { useEffect } from 'react' -import { useTranslation } from 'react-i18next' +import React from 'react' import { FlatList, View } from 'react-native' const SCRIPTS_WITHOUT_BOUNDARIES = [ @@ -136,21 +134,12 @@ const ContentView: React.FC<{ } const TabSharedHistory: React.FC> = ({ - navigation, route: { params: { status, detectedLanguage } } }) => { - const { t } = useTranslation('screenTabs') const { data } = useStatusHistory({ status }) - useEffect(() => { - navigation.setOptions({ - title: t('shared.history.name'), - headerLeft: () => navigation.goBack()} /> - }) - }, []) - const dataReversed = data ? [...data].reverse() : [] const withoutBoundary = !!SCRIPTS_WITHOUT_BOUNDARIES.filter(script => diff --git a/src/screens/Tabs/Shared/Mute.tsx b/src/screens/Tabs/Shared/Mute.tsx index f60c28a4..3c154ad3 100644 --- a/src/screens/Tabs/Shared/Mute.tsx +++ b/src/screens/Tabs/Shared/Mute.tsx @@ -13,7 +13,7 @@ import React, { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { Pressable, View } from 'react-native' -const TabSharedMute: React.FC> = ({ +const TabSharedMute: React.FC> = ({ navigation, route: { params: { account } @@ -47,14 +47,6 @@ const TabSharedMute: React.FC> = useEffect(() => { navigation.setOptions({ - title: t('screenTabs:shared.mute.name', { acct: `@${account.acct}` }), - headerLeft: () => ( - navigation.goBack()} - /> - ), headerRight: () => ( > const [isReporting, setIsReporting] = useState(false) useEffect(() => { navigation.setOptions({ - title: t('screenTabs:shared.report.name', { acct: `@${account.acct}` }), - headerLeft: () => ( - navigation.goBack()} - /> - ), headerRight: () => ( > const [searchTerm, setSearchTerm] = useState('') useEffect(() => { navigation.setOptions({ - headerLeft: () => navigation.goBack()} />, headerTitle: () => { return ( > /> ) - }, - headerBackVisible: false + } }) }, [mode]) useEffect(() => { diff --git a/src/screens/Tabs/Shared/Toot.tsx b/src/screens/Tabs/Shared/Toot.tsx index b2ae7535..154a6da4 100644 --- a/src/screens/Tabs/Shared/Toot.tsx +++ b/src/screens/Tabs/Shared/Toot.tsx @@ -1,8 +1,6 @@ -import { HeaderLeft } from '@components/Header' -import Icon from '@components/Icon' +import { HeaderRight } from '@components/Header' import { Loading } from '@components/Loading' import ComponentSeparator from '@components/Separator' -import CustomText from '@components/Text' import TimelineDefault from '@components/Timeline/Default' import { useQuery } from '@tanstack/react-query' import apiGeneral from '@utils/api/general' @@ -17,7 +15,7 @@ import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import React, { useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { Alert, FlatList, Platform, Pressable, View } from 'react-native' +import { Alert, FlatList, Platform, View } from 'react-native' import { Path, Svg } from 'react-native-svg' const TabSharedToot: React.FC> = ({ @@ -38,38 +36,20 @@ const TabSharedToot: React.FC> = ({ const flRef = useRef>(null) useEffect(() => { - navigation.setOptions({ - headerTitle: () => ( - - Alert.alert( - t('screenTabs:shared.toot.remoteFetch.title'), - t('screenTabs:shared.toot.remoteFetch.message') - ) - } - > - {hasRemoteContent ? ( - - ) : null} - ( + + Alert.alert( + t('screenTabs:shared.toot.remoteFetch.title'), + t('screenTabs:shared.toot.remoteFetch.message') + ) + } /> - - ), - headerLeft: () => navigation.goBack()} />, - headerBackVisible: false - }) + ) + }) navigation.setParams({ queryKey: queryKey.local }) }, [hasRemoteContent]) diff --git a/src/screens/Tabs/Shared/Users.tsx b/src/screens/Tabs/Shared/Users.tsx index 13cfcd9b..c4d62f60 100644 --- a/src/screens/Tabs/Shared/Users.tsx +++ b/src/screens/Tabs/Shared/Users.tsx @@ -1,5 +1,4 @@ import ComponentAccount from '@components/Account' -import { HeaderLeft } from '@components/Header' import Icon from '@components/Icon' import { Loading } from '@components/Loading' import ComponentSeparator from '@components/Separator' @@ -9,7 +8,7 @@ import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users' import { flattenPages } from '@utils/queryHooks/utils' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' -import React, { useEffect } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import { View } from 'react-native' import { FlatList } from 'react-native-gesture-handler' @@ -20,14 +19,6 @@ const TabSharedUsers: React.FC> = }) => { const { colors } = useTheme() const { t } = useTranslation('screenTabs') - useEffect(() => { - navigation.setOptions({ - title: t(`shared.users.${params.reference}.${params.type}`, { - count: params.count - } as any) as any, - headerLeft: () => navigation.goBack()} /> - }) - }, []) const queryKey: QueryKeyUsers = ['Users', params] const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = useUsersQuery({ diff --git a/src/screens/Tabs/Shared/index.tsx b/src/screens/Tabs/Shared/index.tsx index 770ea13d..33ce9141 100644 --- a/src/screens/Tabs/Shared/index.tsx +++ b/src/screens/Tabs/Shared/index.tsx @@ -1,3 +1,5 @@ +import { HeaderLeft, HeaderRight } from '@components/Header' +import { createNativeStackNavigator } from '@react-navigation/native-stack' import TabSharedAccount from '@screens/Tabs/Shared/Account' import TabSharedAccountInLists from '@screens/Tabs/Shared/AccountInLists' import TabSharedAttachments from '@screens/Tabs/Shared/Attachments' @@ -8,58 +10,166 @@ import TabSharedSearch from '@screens/Tabs/Shared/Search' import TabSharedToot from '@screens/Tabs/Shared/Toot' import TabSharedUsers from '@screens/Tabs/Shared/Users' import React from 'react' +import { Trans, useTranslation } from 'react-i18next' import TabSharedFilter from './Filter' import TabSharedMute from './Mute' +import { + TabLocalStackParamList, + TabMeStackParamList, + TabNotificationsStackParamList, + TabPublicStackParamList +} from '@utils/navigation/navigators' +import CustomText from '@components/Text' +import { ParseEmojis } from '@components/Parse' +import { useTheme } from '@utils/styles/ThemeManager' + +const TabShared = ( + Stack: ReturnType< + typeof createNativeStackNavigator< + | TabLocalStackParamList + | TabPublicStackParamList + | TabNotificationsStackParamList + | TabMeStackParamList + > + > +) => { + const { colors } = useTheme() + const { t } = useTranslation(['common', 'screenTabs']) -const TabShared = ({ Stack }: { Stack: any }) => { return ( + }} /> ({ + presentation: 'modal', + title: t('screenTabs:shared.accountInLists.name', { username: username }), + headerRight: () => ( + navigation.pop(1)} + /> + ) + })} /> ({ + headerTitle: () => ( + + , + + ]} + /> + + ) + })} /> ({ + presentation: 'modal', + title: t('screenTabs:shared.filter.name'), + headerRight: () => ( + navigation.goBack()} + /> + ) + })} /> ({ title: `#${decodeURIComponent(tag_name)}` })} /> ({ + presentation: 'modal', + headerLeft: () => , + title: t('screenTabs:shared.mute.name', { acct: `@${acct}` }) + })} /> ({ + presentation: 'modal', + headerLeft: () => , + title: t('screenTabs:shared.report.name', { acct: `@${account.acct}` }) + })} /> - - + + ({ + title: t(`shared.users.${params.reference}.${params.type}`, { + count: params.count + } as any) as any + })} + /> ) }