Fix RefreshControl on Android

This commit is contained in:
Diego Mello 2022-12-05 14:17:43 -03:00
parent da113ac1d0
commit 696a7e623d
2 changed files with 30 additions and 34 deletions

View File

@ -1,11 +0,0 @@
import React from 'react';
import { RefreshControl as RefreshControlRN, RefreshControlProps } from 'react-native';
import { useTheme } from '../../../theme';
type TRefreshControlProps = Pick<RefreshControlProps, 'refreshing' | 'onRefresh'>;
export const RefreshControl = ({ refreshing, onRefresh }: TRefreshControlProps): React.ReactElement => {
const { colors } = useTheme();
return <RefreshControlRN refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.auxiliaryText} />;
};

View File

@ -2,7 +2,7 @@ import { Q } from '@nozbe/watermelondb';
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import moment from 'moment'; import moment from 'moment';
import React from 'react'; import React from 'react';
import { FlatListProps, ViewToken } from 'react-native'; import { FlatListProps, ViewToken, RefreshControl } from 'react-native';
import { event, Value } from 'react-native-reanimated'; import { event, Value } from 'react-native-reanimated';
import { Observable, Subscription } from 'rxjs'; import { Observable, Subscription } from 'rxjs';
@ -18,9 +18,9 @@ import List, { IListProps, TListRef } from './List';
import NavBottomFAB from './NavBottomFAB'; import NavBottomFAB from './NavBottomFAB';
import { loadMissedMessages, loadThreadMessages } from '../../../lib/methods'; import { loadMissedMessages, loadThreadMessages } from '../../../lib/methods';
import { Services } from '../../../lib/services'; import { Services } from '../../../lib/services';
import { MESSAGE_TYPE_ANY_LOAD } from '../../../lib/constants'; import { MESSAGE_TYPE_ANY_LOAD, themes } from '../../../lib/constants';
import { TMessage } from '../definitions'; import { TMessage } from '../definitions';
import { RefreshControl } from './RefreshControl'; import { ThemeContext } from '../../../theme';
const QUERY_SIZE = 50; const QUERY_SIZE = 50;
@ -341,26 +341,33 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
const { rid, tmid, listRef, loading } = this.props; const { rid, tmid, listRef, loading } = this.props;
const { messages, refreshing, highlightedMessage } = this.state; const { messages, refreshing, highlightedMessage } = this.state;
return ( return (
<> // FIXME: added context directly so we don't have to touch on withTheme's ref
<EmptyRoom rid={rid} length={messages.length} mounted={this.mounted} /> <ThemeContext.Consumer>
<List {({ theme }) => (
onScroll={this.onScroll} <>
scrollEventThrottle={16} <EmptyRoom rid={rid} length={messages.length} mounted={this.mounted} />
listRef={listRef} <List
data={messages} onScroll={this.onScroll}
extraData={{ loading, highlightedMessage }} scrollEventThrottle={16}
// @ts-ignore listRef={listRef}
renderItem={this.renderItem} data={messages}
onEndReached={this.onEndReached} extraData={{ loading, highlightedMessage }}
ListFooterComponent={this.renderFooter} // @ts-ignore
onScrollToIndexFailed={this.handleScrollToIndexFailed} renderItem={this.renderItem}
onViewableItemsChanged={this.onViewableItemsChanged} onEndReached={this.onEndReached}
viewabilityConfig={this.viewabilityConfig} ListFooterComponent={this.renderFooter}
nativeID={tmid || rid} onScrollToIndexFailed={this.handleScrollToIndexFailed}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} />} onViewableItemsChanged={this.onViewableItemsChanged}
/> viewabilityConfig={this.viewabilityConfig}
<NavBottomFAB y={this.y} onPress={this.jumpToBottom} isThread={!!tmid} /> nativeID={tmid || rid}
</> refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme!].auxiliaryText} />
}
/>
<NavBottomFAB y={this.y} onPress={this.jumpToBottom} isThread={!!tmid} />
</>
)}
</ThemeContext.Consumer>
); );
} }
} }