diff --git a/src/components/Timelines/Timeline.tsx b/src/components/Timelines/Timeline.tsx index 6456c84e..703aff2f 100644 --- a/src/components/Timelines/Timeline.tsx +++ b/src/components/Timelines/Timeline.tsx @@ -9,7 +9,12 @@ import { useScrollToTop } from '@react-navigation/native' import { localUpdateNotification } from '@utils/slices/instancesSlice' import { StyleConstants } from '@utils/styles/constants' import React, { useCallback, useEffect, useMemo, useRef } from 'react' -import { Platform, RefreshControl, StyleSheet } from 'react-native' +import { + FlatListProps, + Platform, + RefreshControl, + StyleSheet +} from 'react-native' import { FlatList } from 'react-native-gesture-handler' import { useDispatch } from 'react-redux' import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline' @@ -24,6 +29,7 @@ export interface Props { account?: Mastodon.Account['id'] disableRefresh?: boolean disableInfinity?: boolean + customProps?: Partial> } const Timeline: React.FC = ({ @@ -33,7 +39,8 @@ const Timeline: React.FC = ({ toot, account, disableRefresh = false, - disableInfinity = false + disableInfinity = false, + customProps }) => { const queryKeyParams = { page, @@ -208,7 +215,6 @@ const Timeline: React.FC = ({ return ( = ({ // minIndexForVisible: 0, // autoscrollToTopThreshold: 2 // }} + {...customProps} /> ) } diff --git a/src/screens/Shared/Account.tsx b/src/screens/Shared/Account.tsx index 1c1dd70e..474a06e9 100644 --- a/src/screens/Shared/Account.tsx +++ b/src/screens/Shared/Account.tsx @@ -1,19 +1,15 @@ import BottomSheet from '@components/BottomSheet' import { HeaderRight } from '@components/Header' +import Timeline from '@components/Timelines/Timeline' import HeaderActionsAccount from '@components/Timelines/Timeline/Shared/HeaderActions/ActionsAccount' import { useAccountQuery } from '@utils/queryHooks/account' import { getLocalAccount } from '@utils/slices/instancesSlice' -import React, { useEffect, useReducer, useState } from 'react' -import Animated, { - useAnimatedScrollHandler, - useSharedValue -} from 'react-native-reanimated' +import React, { useCallback, useEffect, useReducer, useState } from 'react' +import { useSharedValue } from 'react-native-reanimated' import { useSelector } from 'react-redux' import AccountHeader from './Account/Header' import AccountInformation from './Account/Information' import AccountNav from './Account/Nav' -import AccountSegmentedControl from './Account/SegmentedControl' -import AccountToots from './Account/Toots' import AccountContext from './Account/utils/createContext' import accountInitialState from './Account/utils/initialState' import accountReducer from './Account/utils/reducer' @@ -50,26 +46,29 @@ const ScreenSharedAccount: React.FC = ({ return updateHeaderRight() }, []) - const onScroll = useAnimatedScrollHandler(event => { - scrollY.value = event.contentOffset.y - }) + const onScroll = useCallback(({ nativeEvent }) => { + scrollY.value = nativeEvent.contentOffset.y + }, []) return ( - {accountState.informationLayout?.height && - accountState.informationLayout.y ? ( - - ) : null} - - - - - + + + + + + ) + }} + /> = ({ account, limitHeight = false }) => { }, [account]) return ( - ) diff --git a/src/screens/Shared/Account/Information.tsx b/src/screens/Shared/Account/Information.tsx index 4a3ac645..3bf3a129 100644 --- a/src/screens/Shared/Account/Information.tsx +++ b/src/screens/Shared/Account/Information.tsx @@ -1,4 +1,5 @@ import { StyleConstants } from '@utils/styles/constants' +import { useTheme } from '@utils/styles/ThemeManager' import React, { createRef, useCallback, useContext, useEffect } from 'react' import { Animated, StyleSheet, View } from 'react-native' import AccountInformationAccount from './Information/Account' @@ -21,7 +22,9 @@ const AccountInformation: React.FC = ({ account, ownAccount = false }) => { + const { theme } = useTheme() const { accountDispatch } = useContext(AccountContext) + const shimmerAvatarRef = createRef() const shimmerNameRef = createRef() const shimmerAccountRef = createRef() @@ -56,7 +59,10 @@ const AccountInformation: React.FC = ({ ) return ( - + {/* Moved or not: {account.moved} */} @@ -99,7 +105,8 @@ const AccountInformation: React.FC = ({ const styles = StyleSheet.create({ base: { marginTop: -StyleConstants.Spacing.Global.PagePadding * 3, - padding: StyleConstants.Spacing.Global.PagePadding + padding: StyleConstants.Spacing.Global.PagePadding, + borderBottomWidth: StyleSheet.hairlineWidth }, avatarAndActions: { flexDirection: 'row', diff --git a/src/screens/Shared/Account/Information/Account.tsx b/src/screens/Shared/Account/Information/Account.tsx index d2e7a252..2f14db61 100644 --- a/src/screens/Shared/Account/Information/Account.tsx +++ b/src/screens/Shared/Account/Information/Account.tsx @@ -23,7 +23,7 @@ const AccountInformationAccount = forwardRef( ref={ref} visible={account?.acct !== undefined} width={StyleConstants.Font.Size.M * 8} - height={StyleConstants.Font.Size.M} + height={StyleConstants.Font.LineHeight.M} style={{ marginBottom: StyleConstants.Spacing.L }} shimmerColors={[theme.shimmerDefault, theme.shimmerHighlight, theme.shimmerDefault]} > diff --git a/src/screens/Shared/Account/Information/Created.tsx b/src/screens/Shared/Account/Information/Created.tsx index 11bc8066..0de13c62 100644 --- a/src/screens/Shared/Account/Information/Created.tsx +++ b/src/screens/Shared/Account/Information/Created.tsx @@ -24,7 +24,7 @@ const AccountInformationCreated = forwardRef( ref={ref} visible={account?.created_at !== undefined} width={StyleConstants.Font.Size.S * 8} - height={StyleConstants.Font.Size.S} + height={StyleConstants.Font.LineHeight.S} style={{ marginBottom: StyleConstants.Spacing.M }} shimmerColors={[theme.shimmerDefault, theme.shimmerHighlight, theme.shimmerDefault]} > diff --git a/src/screens/Shared/Account/Information/Fields.tsx b/src/screens/Shared/Account/Information/Fields.tsx index 97787ce8..13014039 100644 --- a/src/screens/Shared/Account/Information/Fields.tsx +++ b/src/screens/Shared/Account/Information/Fields.tsx @@ -9,47 +9,52 @@ export interface Props { account: Mastodon.Account } -const AccountInformationFields: React.FC = ({ account }) => { - const { theme } = useTheme() +const AccountInformationFields = React.memo( + ({ account }: Props) => { + const { theme } = useTheme() - return ( - - {account.fields.map((field, index) => ( - - - - {field.verified_at ? ( - + {account.fields.map((field, index) => ( + + + - ) : null} + {field.verified_at ? ( + + ) : null} + + + + - - - - - ))} - - ) -} + ))} + + ) + }, + () => true +) const styles = StyleSheet.create({ fields: { diff --git a/src/screens/Shared/Account/Information/Name.tsx b/src/screens/Shared/Account/Information/Name.tsx index 2f5976be..7b1c855a 100644 --- a/src/screens/Shared/Account/Information/Name.tsx +++ b/src/screens/Shared/Account/Information/Name.tsx @@ -24,7 +24,7 @@ const AccountInformationName = forwardRef( account?.display_name !== undefined || account?.username !== undefined } width={StyleConstants.Font.Size.L * 8} - height={StyleConstants.Font.Size.L} + height={StyleConstants.Font.LineHeight.L} style={styles.name} shimmerColors={[theme.shimmerDefault, theme.shimmerHighlight, theme.shimmerDefault]} > diff --git a/src/screens/Shared/Account/Information/Notes.tsx b/src/screens/Shared/Account/Information/Notes.tsx index c3fcdefc..26a1d0dd 100644 --- a/src/screens/Shared/Account/Information/Notes.tsx +++ b/src/screens/Shared/Account/Information/Notes.tsx @@ -7,13 +7,16 @@ export interface Props { account: Mastodon.Account } -const AccountInformationNotes: React.FC = ({ account }) => { - return ( - - - - ) -} +const AccountInformationNotes = React.memo( + ({ account }: Props) => { + return ( + + + + ) + }, + () => true +) const styles = StyleSheet.create({ note: { diff --git a/src/screens/Shared/Account/Information/Stats.tsx b/src/screens/Shared/Account/Information/Stats.tsx index a10b57a0..866c05d9 100644 --- a/src/screens/Shared/Account/Information/Stats.tsx +++ b/src/screens/Shared/Account/Information/Stats.tsx @@ -40,7 +40,7 @@ const AccountInformationStats = forwardRef(({ account }, ref) => { ref={ref1} visible={account !== undefined} width={StyleConstants.Font.Size.S * 5} - height={StyleConstants.Font.Size.S} + height={StyleConstants.Font.LineHeight.S} shimmerColors={[theme.shimmerDefault, theme.shimmerHighlight, theme.shimmerDefault]} > @@ -53,7 +53,7 @@ const AccountInformationStats = forwardRef(({ account }, ref) => { ref={ref2} visible={account !== undefined} width={StyleConstants.Font.Size.S * 5} - height={StyleConstants.Font.Size.S} + height={StyleConstants.Font.LineHeight.S} shimmerColors={[theme.shimmerDefault, theme.shimmerHighlight, theme.shimmerDefault]} > (({ account }, ref) => { ref={ref3} visible={account !== undefined} width={StyleConstants.Font.Size.S * 5} - height={StyleConstants.Font.Size.S} + height={StyleConstants.Font.LineHeight.S} shimmerColors={[theme.shimmerDefault, theme.shimmerHighlight, theme.shimmerDefault]} > -} - -const AccountSegmentedControl: React.FC = ({ scrollY }) => { - const { accountState, accountDispatch } = useContext(AccountContext) - const { t } = useTranslation('sharedAccount') - const { mode, theme } = useTheme() - - const headerHeight = useSafeAreaInsets().top + 44 - const styleTransform = useAnimatedStyle(() => { - return { - transform: [ - { - translateY: interpolate( - scrollY.value, - [ - 0, - (accountState.informationLayout?.y || 0) + - (accountState.informationLayout?.height || 0) - - headerHeight - ], - [ - 0, - -(accountState.informationLayout?.y || 0) - - (accountState.informationLayout?.height || 0) + - headerHeight - ], - Extrapolate.CLAMP - ) - } - ] - } - }) - - return ( - - - accountDispatch({ - type: 'segmentedIndex', - payload: nativeEvent.selectedSegmentIndex - }) - } - appearance={mode} - /> - - ) -} - -const styles = StyleSheet.create({ - base: { - ...StyleSheet.absoluteFillObject, - zIndex: 99, - borderTopWidth: StyleSheet.hairlineWidth, - padding: StyleConstants.Spacing.Global.PagePadding, - height: 33 + StyleConstants.Spacing.Global.PagePadding * 2 - } -}) - -export default React.memo(AccountSegmentedControl, () => true) diff --git a/src/screens/Shared/Account/Toots.tsx b/src/screens/Shared/Account/Toots.tsx deleted file mode 100644 index a75182f8..00000000 --- a/src/screens/Shared/Account/Toots.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import Timeline from '@components/Timelines/Timeline' -import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs' -import { StyleConstants } from '@utils/styles/constants' -import React, { useCallback, useContext } from 'react' -import { Dimensions, StyleSheet } from 'react-native' -import { useSafeAreaInsets } from 'react-native-safe-area-context' -import { TabView } from 'react-native-tab-view' -import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter' -import AccountContext from './utils/createContext' - -export interface Props { - id: Mastodon.Account['id'] -} - -const AccountToots: React.FC = ({ id }) => { - const { accountState, accountDispatch } = useContext(AccountContext) - const headerHeight = useSafeAreaInsets().top + 44 - const footerHeight = useSafeAreaInsets().bottom + useBottomTabBarHeight() - - const routes: { key: App.Pages }[] = [ - { key: 'Account_Default' }, - { key: 'Account_All' }, - { key: 'Account_Media' } - ] - - const renderScene = ({ - route - }: { - route: { - key: App.Pages - } - }) => { - return - } - - const renderPager = useCallback(props => , []) - - return ( - null} - initialLayout={{ width: Dimensions.get('window').width }} - navigationState={{ index: accountState.segmentedIndex, routes }} - onIndexChange={index => - accountDispatch({ type: 'segmentedIndex', payload: index }) - } - style={[ - styles.base, - { - height: - Dimensions.get('window').height - - headerHeight - - footerHeight - - (33 + StyleConstants.Spacing.Global.PagePadding * 2) - } - ]} - /> - ) -} - -const styles = StyleSheet.create({ - base: { - marginTop: StyleConstants.Spacing.Global.PagePadding + 33 - } -}) - -export default React.memo(AccountToots, () => true) diff --git a/src/screens/Shared/Account/utils/initialState.ts b/src/screens/Shared/Account/utils/initialState.ts index 1003e239..cde600db 100644 --- a/src/screens/Shared/Account/utils/initialState.ts +++ b/src/screens/Shared/Account/utils/initialState.ts @@ -1,9 +1,9 @@ -import { AccountState } from "./types" +import { AccountState } from './types' const accountInitialState: AccountState = { - headerRatio: 0.4, + headerRatio: 1 / 3, informationLayout: { height: 0, y: 100 }, segmentedIndex: 0 } -export default accountInitialState \ No newline at end of file +export default accountInitialState