diff --git a/src/components/Timelines/Timeline.tsx b/src/components/Timelines/Timeline.tsx index f81ea59b..19dce30c 100644 --- a/src/components/Timelines/Timeline.tsx +++ b/src/components/Timelines/Timeline.tsx @@ -50,14 +50,12 @@ const Timeline: React.FC = ({ status, data, refetch, - isFetching, isSuccess, hasPreviousPage, fetchPreviousPage, isFetchingPreviousPage, hasNextPage, - fetchNextPage, - isFetchingNextPage + fetchNextPage } = useInfiniteQuery(queryKey, timelineFetch, { getPreviousPageParam: firstPage => { return firstPage.toots.length @@ -67,7 +65,7 @@ const Timeline: React.FC = ({ } : undefined }, - getNextPageParam: (lastPage, all) => { + getNextPageParam: lastPage => { return lastPage.toots.length ? { direction: 'next', @@ -96,8 +94,8 @@ const Timeline: React.FC = ({ } }, [isSuccess]) - const flKeyExtrator = useCallback(({ id }) => id, []) - const flRenderItem = useCallback( + const keyExtractor = useCallback(({ id }) => id, []) + const renderItem = useCallback( ({ item, index }) => { switch (page) { case 'Conversations': @@ -123,7 +121,7 @@ const Timeline: React.FC = ({ }, [flattenPinnedLength[0]] ) - const flItemSeparatorComponent = useCallback( + const ItemSeparatorComponent = useCallback( ({ leadingItem }) => ( = ({ () => , [status] ) - const flOnRefresh = useCallback(() => { - !disableRefresh && - (hasPreviousPage - ? fetchPreviousPage() - : !isFetching - ? refetch() - : undefined) - }, [hasPreviousPage, isFetching]) - const flOnEndReach = useCallback(() => !disableRefresh && fetchNextPage(), []) - const flFooter = useCallback( - () => (!disableRefresh ? : null), + const onEndReached = useCallback(() => fetchNextPage(), []) + const ListFooterComponent = useCallback( + () => , [hasNextPage] ) - const flRefreshControl = useMemo( + const refreshControl = useMemo( () => ( fetchPreviousPage()} /> ), - [isFetchingPreviousPage, isFetching] + [isFetchingPreviousPage] ) const onScrollToIndexFailed = useCallback(error => { const offset = error.averageItemLength * error.index @@ -177,14 +167,14 @@ const Timeline: React.FC = ({ initialNumToRender={5} maxToRenderPerBatch={5} style={styles.flatList} - renderItem={flRenderItem} - onEndReached={flOnEndReach} - keyExtractor={flKeyExtrator} - ListFooterComponent={flFooter} - refreshControl={flRefreshControl} + renderItem={renderItem} + onEndReached={onEndReached} + keyExtractor={keyExtractor} + onEndReachedThreshold={0.75} + ListFooterComponent={ListFooterComponent} ListEmptyComponent={flItemEmptyComponent} - ItemSeparatorComponent={flItemSeparatorComponent} - onEndReachedThreshold={!disableRefresh ? 0.75 : null} + {...(!disableRefresh && { refreshControl })} + ItemSeparatorComponent={ItemSeparatorComponent} {...(toot && isSuccess && { onScrollToIndexFailed })} /> ) diff --git a/src/components/Timelines/Timeline/Shared/Avatar.tsx b/src/components/Timelines/Timeline/Shared/Avatar.tsx index 39c53753..cefaf91a 100644 --- a/src/components/Timelines/Timeline/Shared/Avatar.tsx +++ b/src/components/Timelines/Timeline/Shared/Avatar.tsx @@ -17,7 +17,7 @@ const TimelineAvatar: React.FC = ({ queryKey, account }) => { return ( - + ) } diff --git a/src/screens/Me/Root.tsx b/src/screens/Me/Root.tsx index 67293811..97fe26e8 100644 --- a/src/screens/Me/Root.tsx +++ b/src/screens/Me/Root.tsx @@ -1,5 +1,5 @@ import React, { useRef, useState } from 'react' -import { Animated, ScrollView } from 'react-native' +import { Animated, LayoutAnimation, ScrollView } from 'react-native' import { useSelector } from 'react-redux' import { getLocalUrl } from '@utils/slices/instancesSlice' @@ -14,6 +14,7 @@ import { AccountState } from '../Shared/Account' import AccountNav from '../Shared/Account/Nav' const ScreenMeRoot: React.FC = () => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) const localRegistered = useSelector(getLocalUrl) const scrollRef = useRef(null) diff --git a/src/screens/Me/Root/MyInfo.tsx b/src/screens/Me/Root/MyInfo.tsx index 84d0ab0b..982e47b8 100644 --- a/src/screens/Me/Root/MyInfo.tsx +++ b/src/screens/Me/Root/MyInfo.tsx @@ -28,7 +28,7 @@ const MyInfo: React.FC = ({ setData }) => { account={data} limitHeight /> - + ) } diff --git a/src/screens/Shared/Account.tsx b/src/screens/Shared/Account.tsx index 9fb77524..6d66a973 100644 --- a/src/screens/Shared/Account.tsx +++ b/src/screens/Shared/Account.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useReducer, useRef, useState } from 'react' -import { Animated, ScrollView } from 'react-native' +import { Animated, LayoutAnimation, ScrollView } from 'react-native' import { useQuery } from 'react-query' import { accountFetch } from '@utils/fetches/accountFetch' @@ -73,10 +73,10 @@ const ScreenSharedAccount: React.FC = ({ }, navigation }) => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) const localAccountId = useSelector(getLocalAccountId) const { data } = useQuery(['Account', { id: account.id }], accountFetch) - // const stateRelationships = useSelector(relationshipsState) const scrollY = useRef(new Animated.Value(0)).current const [accountState, accountDispatch] = useReducer( accountReducer, @@ -104,11 +104,14 @@ const ScreenSharedAccount: React.FC = ({ scrollY={scrollY} account={data} /> - + {accountState.informationLayout?.height && + accountState.informationLayout.y ? ( + + ) : null} = ({ account, limitHeight = false }) => { - const [imageShown, setImageShown] = useState(true) + const [ratio, setRatio] = useState(accountState.headerRatio) useEffect(() => { - if (account?.header) { - if (account.header.includes('/headers/original/missing.png')) { - animateNewSize(accountState.headerRatio) - } else { - if (account.header !== account.header_static) { - setImageShown(false) + if ( + account?.header && + !account.header.includes('/headers/original/missing.png') + ) { + Image.getSize(account.header, (width, height) => { + if (!limitHeight) { + accountDispatch && + accountDispatch({ + type: 'headerRatio', + payload: height / width + }) } - Image.getSize( - account.header, - (width, height) => { - if (!limitHeight) { - accountDispatch && - accountDispatch({ - type: 'headerRatio', - payload: height / width - }) - } - animateNewSize( - limitHeight ? accountState.headerRatio : height / width - ) - }, - () => { - animateNewSize(accountState.headerRatio) - } - ) - } + setRatio(limitHeight ? accountState.headerRatio : height / width) + }) } }, [account]) - const theImage = imageShown ? ( - - ) : null - const windowWidth = Dimensions.get('window').width - const imageHeight = useRef( - new Animated.Value(windowWidth * accountState.headerRatio) - ).current - const animateNewSize = (ratio: number) => { - Animated.timing(imageHeight, { - toValue: windowWidth * ratio, - duration: 350, - useNativeDriver: false - }).start(({ finished }) => { - if (finished) { - setImageShown(true) - } - }) - } return ( - - {theImage} - + + + ) } diff --git a/src/screens/Shared/Account/Information.tsx b/src/screens/Shared/Account/Information.tsx index 0bd496cf..d7dde1fd 100644 --- a/src/screens/Shared/Account/Information.tsx +++ b/src/screens/Shared/Account/Information.tsx @@ -49,9 +49,14 @@ const fireMutation = async ({ export interface Props { accountDispatch?: Dispatch account: Mastodon.Account | undefined + disableActions?: boolean } -const AccountInformation: React.FC = ({ accountDispatch, account }) => { +const AccountInformation: React.FC = ({ + accountDispatch, + account, + disableActions = false +}) => { const navigation = useNavigation() const { t } = useTranslation('sharedAccount') const { theme } = useTheme() @@ -165,22 +170,24 @@ const AccountInformation: React.FC = ({ accountDispatch, account }) => { onLoadEnd={() => setAvatarLoaded(true)} /> - - - navigation.navigate(getCurrentTab(navigation), { - screen: 'Screen-Shared-Compose', - params: { - type: 'conversation', - incomingStatus: { account } - } - }) - } - style={{ marginRight: StyleConstants.Spacing.S }} - /> - {followingButton} - + {!disableActions && ( + + + navigation.navigate(getCurrentTab(navigation), { + screen: 'Screen-Shared-Compose', + params: { + type: 'conversation', + incomingStatus: { account } + } + }) + } + style={{ marginRight: StyleConstants.Spacing.S }} + /> + {followingButton} + + )} = ({ (accountState.informationLayout?.height || 0) + headerHeight ], - extrapolate: 'clamp' + extrapolate: 'clamp', + easing: undefined }) return ( diff --git a/src/screens/Shared/Compose.tsx b/src/screens/Shared/Compose.tsx index e72b8cf5..5604faec 100644 --- a/src/screens/Shared/Compose.tsx +++ b/src/screens/Shared/Compose.tsx @@ -13,6 +13,7 @@ import { Alert, Keyboard, KeyboardAvoidingView, + LayoutAnimation, StyleSheet, Text, TextInput @@ -330,6 +331,7 @@ export interface Props { } const Compose: React.FC = ({ route: { params }, navigation }) => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) const { theme } = useTheme() const queryClient = useQueryClient()