Cleanup

app/definitions/IMessage.ts

@@ -8,7 +8,15 @@ import { TThreadMessageModel } from './IThreadMessage';
 import { TThreadModel } from './IThread';
 import { IUrl, IUrlFromServer } from './IUrl';
 
-export type MessageType = 'jitsi_call_started' | 'discussion-created' | 'e2e' | 'load_more' | 'rm' | 'uj' | MessageTypeLoad | MessageTypesValues;
+export type MessageType =
+	| 'jitsi_call_started'
+	| 'discussion-created'
+	| 'e2e'
+	| 'load_more'
+	| 'rm'
+	| 'uj'
+	| MessageTypeLoad
+	| MessageTypesValues;
 
 export interface IUserMessage {
 	_id: string;

app/views/RoomView/List/RefreshControl.tsx

@@ -1,40 +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;
-}
-
-const RefreshControl = ({ children, onRefresh, refreshing }: IRefreshControl): React.ReactElement => {
-	const { colors } = useTheme();
-	// if (isAndroid) {
-	// 	return (
-	// 		<RNRefreshControl
-	// 			onRefresh={onRefresh}
-	// 			refreshing={refreshing}
-	// 			tintColor={colors.auxiliaryText}
-	// 			style={[style.container, style.inverted]}
-	// 		>
-	// 			{children}
-	// 		</RNRefreshControl>
-	// 	);
-	// }
-
-	const refreshControl = <RNRefreshControl onRefresh={onRefresh} refreshing={refreshing} tintColor={colors.auxiliaryText} />;
-
-	return React.cloneElement(children, { refreshControl });
-};
-
-export default RefreshControl;

app/views/RoomView/List/index.tsx

@@ -2,7 +2,7 @@ import { Q } from '@nozbe/watermelondb';
 import { dequal } from 'dequal';
 import moment from 'moment';
 import React from 'react';
-import { FlatListProps, View, ViewToken, StyleSheet, Platform } from 'react-native';
+import { FlatListProps, ViewToken, RefreshControl } from 'react-native';
 import { event, Value } from 'react-native-reanimated';
 import { Observable, Subscription } from 'rxjs';
 
@@ -18,20 +18,11 @@ 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';
+import { TSupportedThemes, withTheme } from '../../../theme';
+import { themes } from '../../../lib/constants';
 
 const QUERY_SIZE = 50;
 
-const styles = StyleSheet.create({
-	// inverted: {
-	// 	...Platform.select({
-	// 		android: {
-	// 			scaleY: -1
-	// 		}
-	// 	})
-	// }
-});
-
 const onScroll = ({ y }: { y: Value<number> }) =>
 	event(
 		[
@@ -58,6 +49,7 @@ export interface IListContainerProps {
 	navigation: any; // TODO: type me
 	showMessageInMainThread: boolean;
 	serverVersion: string | null;
+	theme?: TSupportedThemes;
 }
 
 interface IListContainerState {
@@ -354,7 +346,7 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 	renderItem: FlatListProps<any>['renderItem'] = ({ item, index }) => {
 		const { messages, highlightedMessage } = this.state;
 		const { renderRow } = this.props;
-		return <View style={styles.inverted}>{renderRow(item, messages[index + 1], highlightedMessage)}</View>;
+		return renderRow(item, messages[index + 1], highlightedMessage);
 	};
 
 	onViewableItemsChanged: FlatListProps<any>['onViewableItemsChanged'] = ({ viewableItems }) => {
@@ -363,26 +355,27 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 
 	render() {
 		console.count(`${this.constructor.name}.render calls`);
-		const { rid, tmid, listRef } = this.props;
+		const { rid, tmid, listRef, theme } = this.props;
 		const { messages, refreshing } = this.state;
 		return (
 			<>
 				<EmptyRoom rid={rid} length={messages.length} mounted={this.mounted} />
-				<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh}>
+				<List
-					<List
+					onScroll={this.onScroll}
-						onScroll={this.onScroll}
+					scrollEventThrottle={16}
-						scrollEventThrottle={16}
+					listRef={listRef}
-						listRef={listRef}
+					data={messages}
-						data={messages}
+					renderItem={this.renderItem}
-						renderItem={this.renderItem}
+					onEndReached={this.onEndReached}
-						onEndReached={this.onEndReached}
+					ListFooterComponent={this.renderFooter}
-						ListFooterComponent={this.renderFooter}
+					onScrollToIndexFailed={this.handleScrollToIndexFailed}
-						onScrollToIndexFailed={this.handleScrollToIndexFailed}
+					onViewableItemsChanged={this.onViewableItemsChanged}
-						onViewableItemsChanged={this.onViewableItemsChanged}
+					viewabilityConfig={this.viewabilityConfig}
-						viewabilityConfig={this.viewabilityConfig}
+					nativeID={tmid || rid}
-						nativeID={tmid || rid}
+					refreshControl={
-					/>
+						<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme!].auxiliaryText} />
-				</RefreshControl>
+					}
+				/>
 				<NavBottomFAB y={this.y} onPress={this.jumpToBottom} isThread={!!tmid} />
 			</>
 		);
@@ -391,4 +384,4 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 
 export type ListContainerType = ListContainer;
 
-export default ListContainer;
+export default withTheme(ListContainer);

app/views/RoomView/index.tsx

@@ -1529,6 +1529,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				<StatusBar />
 				<Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} />
 				<List
+					// @ts-ignore
 					ref={this.list}
 					listRef={this.flatList}
 					rid={rid}