diff --git a/app/views/RoomView/List/components/List.tsx b/app/views/RoomView/List/components/List.tsx index 1976075c5..22c07570f 100644 --- a/app/views/RoomView/List/components/List.tsx +++ b/app/views/RoomView/List/components/List.tsx @@ -43,7 +43,7 @@ export const List = ({ listRef, jumpToBottom, isThread, ...props }: IListProps) keyExtractor={item => item.id} contentContainerStyle={styles.contentContainer} style={styles.list} - inverted + inverted={isIOS} removeClippedSubviews={isIOS} initialNumToRender={7} onEndReachedThreshold={0.5} diff --git a/app/views/RoomView/List/components/NavBottomFAB.tsx b/app/views/RoomView/List/components/NavBottomFAB.tsx index 9ecb6681e..a0d9a65c6 100644 --- a/app/views/RoomView/List/components/NavBottomFAB.tsx +++ b/app/views/RoomView/List/components/NavBottomFAB.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleSheet, View, Platform } from 'react-native'; import { CustomIcon } from '../../../../containers/CustomIcon'; import { useTheme } from '../../../../theme'; @@ -43,7 +43,15 @@ const NavBottomFAB = ({ style={[ styles.container, { - bottom: 100 + (isThread ? 40 : 0) + ...Platform.select({ + ios: { + bottom: 100 + (isThread ? 40 : 0) + }, + android: { + top: 15, + scaleY: -1 + } + }) } ]} testID='nav-jump-to-bottom' diff --git a/app/views/RoomView/List/hooks/index.ts b/app/views/RoomView/List/hooks/index.ts index 12e970eca..0e9e991f8 100644 --- a/app/views/RoomView/List/hooks/index.ts +++ b/app/views/RoomView/List/hooks/index.ts @@ -1,3 +1,2 @@ export * from './useMessages'; -export * from './useRefresh'; export * from './useScroll'; diff --git a/app/views/RoomView/List/hooks/useRefresh.ts b/app/views/RoomView/List/hooks/useRefresh.ts deleted file mode 100644 index 79b744d13..000000000 --- a/app/views/RoomView/List/hooks/useRefresh.ts +++ /dev/null @@ -1,27 +0,0 @@ -import moment from 'moment'; -import { useState } from 'react'; - -import log from '../../../../lib/methods/helpers/log'; -import { loadMissedMessages, loadThreadMessages } from '../../../../lib/methods'; - -export const useRefresh = ({ rid, tmid, messagesLength }: { rid: string; tmid?: string; messagesLength: number }) => { - const [refreshing, setRefreshing] = useState(false); - - const refresh = async () => { - if (messagesLength) { - setRefreshing(true); - try { - if (tmid) { - await loadThreadMessages({ tmid, rid }); - } else { - await loadMissedMessages({ rid, lastOpen: moment().subtract(7, 'days').toDate() }); - } - } catch (e) { - log(e); - } - setRefreshing(false); - } - }; - - return [refreshing, refresh] as const; -}; diff --git a/app/views/RoomView/List/index.tsx b/app/views/RoomView/List/index.tsx index c38080468..a4c666be5 100644 --- a/app/views/RoomView/List/index.tsx +++ b/app/views/RoomView/List/index.tsx @@ -1,12 +1,24 @@ import React, { forwardRef, useImperativeHandle } from 'react'; -import { RefreshControl } from 'react-native'; +import { Platform, StyleSheet, View } from 'react-native'; import ActivityIndicator from '../../../containers/ActivityIndicator'; -import { useMessages, useRefresh, useScroll } from './hooks'; -import { isIOS, useDebounce } from '../../../lib/methods/helpers'; +import { isAndroid, useDebounce } from '../../../lib/methods/helpers'; import { EmptyRoom, List } from './components'; import { IListContainerProps, IListContainerRef, IListProps } from './definitions'; -import { useTheme } from '../../../theme'; +import { useMessages, useScroll } from './hooks'; + +const styles = StyleSheet.create({ + inverted: { + ...Platform.select({ + android: { + scaleY: -1 + } + }) + } +}); + +const Container = ({ children }: { children: React.ReactElement }) => + isAndroid ? {children} : <>{children}; const ListContainer = forwardRef( ({ rid, tmid, renderRow, showMessageInMainThread, serverVersion, hideSystemMessages, listRef, loading }, ref) => { @@ -17,8 +29,6 @@ const ListContainer = forwardRef( serverVersion, hideSystemMessages }); - const { colors } = useTheme(); - const [refreshing, refresh] = useRefresh({ rid, tmid, messagesLength: messages.length }); const { jumpToBottom, jumpToMessage, @@ -44,25 +54,26 @@ const ListContainer = forwardRef( return null; }; - const renderItem: IListProps['renderItem'] = ({ item, index }) => renderRow(item, messages[index + 1], highlightedMessageId); + const renderItem: IListProps['renderItem'] = ({ item, index }) => ( + {renderRow(item, messages[index + 1], highlightedMessageId)} + ); return ( <> - : undefined - } - /> + + + ); } diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx index 4aea96c2c..62338423f 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -1361,8 +1361,8 @@ class RoomView extends React.Component { if (showUnreadSeparator || dateSeparator) { return ( <> - {content} + {content} ); }