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,6 +341,9 @@ 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
<ThemeContext.Consumer>
{({ theme }) => (
<> <>
<EmptyRoom rid={rid} length={messages.length} mounted={this.mounted} /> <EmptyRoom rid={rid} length={messages.length} mounted={this.mounted} />
<List <List
@ -357,10 +360,14 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
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} />} refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme!].auxiliaryText} />
}
/> />
<NavBottomFAB y={this.y} onPress={this.jumpToBottom} isThread={!!tmid} /> <NavBottomFAB y={this.y} onPress={this.jumpToBottom} isThread={!!tmid} />
</> </>
)}
</ThemeContext.Consumer>
); );
} }
} }