Fix RefreshControl on Android
This commit is contained in:
parent
da113ac1d0
commit
696a7e623d
|
@ -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} />;
|
|
||||||
};
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue