diff --git a/app/views/RoomView/List/components/List.tsx b/app/views/RoomView/List/components/List.tsx index 22c07570f..1976075c5 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={isIOS} + inverted 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 a0d9a65c6..9ecb6681e 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, Platform } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import { CustomIcon } from '../../../../containers/CustomIcon'; import { useTheme } from '../../../../theme'; @@ -43,15 +43,7 @@ const NavBottomFAB = ({ style={[ styles.container, { - ...Platform.select({ - ios: { - bottom: 100 + (isThread ? 40 : 0) - }, - android: { - top: 15, - scaleY: -1 - } - }) + bottom: 100 + (isThread ? 40 : 0) } ]} testID='nav-jump-to-bottom' diff --git a/app/views/RoomView/List/components/RefreshControl.tsx b/app/views/RoomView/List/components/RefreshControl.tsx deleted file mode 100644 index ef72298ab..000000000 --- a/app/views/RoomView/List/components/RefreshControl.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { RefreshControl as RNRefreshControl, RefreshControlProps, StyleSheet } from 'react-native'; - -import { useTheme } from '../../../../theme'; -import { isAndroid } from '../../../../lib/methods/helpers'; - -const style = StyleSheet.create({ - container: { - flex: 1 - }, - inverted: { - scaleY: -1 - } -}); - -interface IRefreshControl extends RefreshControlProps { - children: React.ReactElement; -} - -export const RefreshControl = ({ children, onRefresh, refreshing }: IRefreshControl): React.ReactElement => { - const { colors } = useTheme(); - if (isAndroid) { - return ( - - {children} - - ); - } - - const refreshControl = ; - - return React.cloneElement(children, { refreshControl }); -}; diff --git a/app/views/RoomView/List/components/index.ts b/app/views/RoomView/List/components/index.ts index 7f17ff1d9..c45143de1 100644 --- a/app/views/RoomView/List/components/index.ts +++ b/app/views/RoomView/List/components/index.ts @@ -1,4 +1,3 @@ export * from './NavBottomFAB'; -export * from './RefreshControl'; export * from './EmptyRoom'; export * from './List'; diff --git a/app/views/RoomView/List/index.tsx b/app/views/RoomView/List/index.tsx index 6846f208f..c38080468 100644 --- a/app/views/RoomView/List/index.tsx +++ b/app/views/RoomView/List/index.tsx @@ -1,21 +1,12 @@ import React, { forwardRef, useImperativeHandle } from 'react'; -import { View, Platform, StyleSheet } from 'react-native'; +import { RefreshControl } from 'react-native'; import ActivityIndicator from '../../../containers/ActivityIndicator'; import { useMessages, useRefresh, useScroll } from './hooks'; -import { useDebounce } from '../../../lib/methods/helpers'; -import { RefreshControl, EmptyRoom, List } from './components'; +import { isIOS, useDebounce } from '../../../lib/methods/helpers'; +import { EmptyRoom, List } from './components'; import { IListContainerProps, IListContainerRef, IListProps } from './definitions'; - -const styles = StyleSheet.create({ - inverted: { - ...Platform.select({ - android: { - scaleY: -1 - } - }) - } -}); +import { useTheme } from '../../../theme'; const ListContainer = forwardRef( ({ rid, tmid, renderRow, showMessageInMainThread, serverVersion, hideSystemMessages, listRef, loading }, ref) => { @@ -26,6 +17,7 @@ const ListContainer = forwardRef( serverVersion, hideSystemMessages }); + const { colors } = useTheme(); const [refreshing, refresh] = useRefresh({ rid, tmid, messagesLength: messages.length }); const { jumpToBottom, @@ -52,26 +44,25 @@ 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 62338423f..4aea96c2c 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} + ); }