animation fix and minor cleanup
This commit is contained in:
parent
490e567c85
commit
a38bc37aaa
|
@ -1,40 +1,32 @@
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { FlatListProps, StyleSheet } from 'react-native';
|
import { StyleSheet } from 'react-native';
|
||||||
// import { FlatList } from 'react-native-gesture-handler';
|
import { FlashList, FlashListProps } from '@shopify/flash-list';
|
||||||
import { FlashList } from '@shopify/flash-list';
|
|
||||||
import Animated from 'react-native-reanimated';
|
import Animated from 'react-native-reanimated';
|
||||||
|
|
||||||
import scrollPersistTaps from '../../../lib/methods/helpers/scrollPersistTaps';
|
import scrollPersistTaps from '../../../lib/methods/helpers/scrollPersistTaps';
|
||||||
|
|
||||||
const AnimatedFlatList = Animated.createAnimatedComponent(FlashList);
|
const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
contentContainer: {
|
contentContainer: {
|
||||||
paddingTop: 10
|
paddingTop: 4
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// export type TListRef = React.RefObject<FlatList & { getNode: () => FlatList }>;
|
export type IListProps = FlashListProps<any>;
|
||||||
|
|
||||||
export type IListProps = FlatListProps<any>;
|
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const List = ({ listRef, ...props }: IListProps) => (
|
const List = ({ listRef, ...props }: IListProps) => (
|
||||||
<AnimatedFlatList
|
<AnimatedFlashList
|
||||||
testID='room-view-messages'
|
testID='room-view-messages'
|
||||||
ref={listRef}
|
ref={listRef}
|
||||||
keyExtractor={(item: any) => item.id}
|
keyExtractor={(item: any) => item.id}
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
contentContainerStyle={styles.contentContainer}
|
contentContainerStyle={styles.contentContainer}
|
||||||
// style={styles.list}
|
|
||||||
inverted
|
inverted
|
||||||
estimatedItemSize={150}
|
estimatedItemSize={150}
|
||||||
// removeClippedSubviews={isIOS}
|
|
||||||
// initialNumToRender={7}
|
|
||||||
onEndReachedThreshold={0.5}
|
onEndReachedThreshold={0.5}
|
||||||
// maxToRenderPerBatch={5}
|
|
||||||
// windowSize={10}
|
|
||||||
{...props}
|
{...props}
|
||||||
{...scrollPersistTaps}
|
{...scrollPersistTaps}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -147,7 +147,7 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
|
||||||
|
|
||||||
query = async () => {
|
query = async () => {
|
||||||
this.count += QUERY_SIZE;
|
this.count += QUERY_SIZE;
|
||||||
const { rid, tmid, showMessageInMainThread, serverVersion } = this.props;
|
const { rid, tmid, showMessageInMainThread, serverVersion, listRef } = this.props;
|
||||||
const db = database.active;
|
const db = database.active;
|
||||||
|
|
||||||
// handle servers with version < 3.0.0
|
// handle servers with version < 3.0.0
|
||||||
|
@ -238,6 +238,7 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
|
||||||
|
|
||||||
if (this.mounted) {
|
if (this.mounted) {
|
||||||
if (this.animated) {
|
if (this.animated) {
|
||||||
|
listRef.current?.prepareForLayoutAnimationRender();
|
||||||
animateNextTransition();
|
animateNextTransition();
|
||||||
}
|
}
|
||||||
this.setState({ messages });
|
this.setState({ messages });
|
||||||
|
|
Loading…
Reference in New Issue