animation fix and minor cleanup

This commit is contained in:
Diego Mello 2022-11-25 16:32:08 -03:00
parent 490e567c85
commit a38bc37aaa
2 changed files with 8 additions and 15 deletions

View File

@ -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}
/> />

View File

@ -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 });