diff --git a/app/views/RoomView/List/List.tsx b/app/views/RoomView/List/List.tsx
index 50b25f448..cf235ee8d 100644
--- a/app/views/RoomView/List/List.tsx
+++ b/app/views/RoomView/List/List.tsx
@@ -31,7 +31,7 @@ const List = ({ listRef, ...props }: IListProps) => (
keyExtractor={(item: any) => 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/RefreshControl.tsx b/app/views/RoomView/List/RefreshControl.tsx
new file mode 100644
index 000000000..2f6b28f35
--- /dev/null
+++ b/app/views/RoomView/List/RefreshControl.tsx
@@ -0,0 +1,40 @@
+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;
+}
+
+const RefreshControl = ({ children, onRefresh, refreshing }: IRefreshControl): React.ReactElement => {
+ const { colors } = useTheme();
+ if (isAndroid) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ const refreshControl = ;
+
+ return React.cloneElement(children, { refreshControl });
+};
+
+export default RefreshControl;
diff --git a/app/views/RoomView/List/index.tsx b/app/views/RoomView/List/index.tsx
index 779de642b..7e8538974 100644
--- a/app/views/RoomView/List/index.tsx
+++ b/app/views/RoomView/List/index.tsx
@@ -2,12 +2,10 @@ import { Q } from '@nozbe/watermelondb';
import { dequal } from 'dequal';
import moment from 'moment';
import React from 'react';
-import { FlatListProps, RefreshControl, ViewToken } from 'react-native';
+import { FlatListProps, View, ViewToken, StyleSheet, Platform } from 'react-native';
import { event, Value } from 'react-native-reanimated';
import { Observable, Subscription } from 'rxjs';
-import { TSupportedThemes } from '../../../theme';
-import { themes } from '../../../lib/constants';
import ActivityIndicator from '../../../containers/ActivityIndicator';
import { TAnyMessageModel, TMessageModel, TThreadMessageModel, TThreadModel } from '../../../definitions';
import database from '../../../lib/database';
@@ -19,9 +17,20 @@ import List, { IListProps, TListRef } from './List';
import NavBottomFAB from './NavBottomFAB';
import { loadMissedMessages, loadThreadMessages } from '../../../lib/methods';
import { Services } from '../../../lib/services';
+import RefreshControl from './RefreshControl';
const QUERY_SIZE = 50;
+const styles = StyleSheet.create({
+ inverted: {
+ ...Platform.select({
+ android: {
+ scaleY: -1
+ }
+ })
+ }
+});
+
const onScroll = ({ y }: { y: Value }) =>
event(
[
@@ -40,7 +49,6 @@ export interface IListContainerProps {
renderRow: Function;
rid: string;
tmid?: string;
- theme: TSupportedThemes;
loading: boolean;
listRef: TListRef;
hideSystemMessages?: string[];
@@ -98,10 +106,7 @@ class ListContainer extends React.Component['renderItem'] = ({ item, index }) => {
const { messages, highlightedMessage } = this.state;
const { renderRow } = this.props;
- return renderRow(item, messages[index + 1], highlightedMessage);
+ return {renderRow(item, messages[index + 1], highlightedMessage)};
};
onViewableItemsChanged: FlatListProps['onViewableItemsChanged'] = ({ viewableItems }) => {
@@ -359,25 +364,23 @@ class ListContainer extends React.Component
-
- }
- />
+
+
+
>
);
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index 4b7213f80..1b6d4081e 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -1365,8 +1365,8 @@ class RoomView extends React.Component {
if (showUnreadSeparator || dateSeparator) {
return (
<>
- {content}
+ {content}
>
);
}
@@ -1514,7 +1514,6 @@ class RoomView extends React.Component {
listRef={this.flatList}
rid={rid}
tmid={this.tmid}
- theme={theme}
tunread={tunread}
ignored={ignored}
renderRow={this.renderItem}