Skip to content

Commit

Permalink
[native] Stop using LayoutAnimation in ChatList
Browse files Browse the repository at this point in the history
Summary:
We want to stop using `LayoutAnimation` because I think it's leading to [weird layout issues on Android](#109).

`LayoutAnimation` does two things for us in `ChatList` right now:
1. Animates the scroll position when new items appear
2. Animates the opacity of new items

This replaces #1 but does not replace #2

Reviewers: zrebcu411, KatPo, palys-swm

Reviewed By: palys-swm

Differential Revision: https://phabricator.ashoat.com/D23
  • Loading branch information
Ashoat committed Aug 26, 2020
1 parent be068a0 commit 34bc5a4
Showing 1 changed file with 11 additions and 22 deletions.
33 changes: 11 additions & 22 deletions native/chat/chat-list.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import type { ChatMessageItem } from 'lib/selectors/chat-selectors';
import * as React from 'react';
import {
FlatList,
LayoutAnimation,
Animated,
Easing,
StyleSheet,
Expand Down Expand Up @@ -188,28 +187,18 @@ class ChatList extends React.PureComponent<Props, State> {
return;
}

if (scrollPos <= 0 && adjustScrollPos > 0) {
// This indicates we're scrolled to the bottom and something just got
// prepended to the front (bottom) of the chat list. We'll animate it in
// and we won't adjust scroll position
LayoutAnimation.easeInEaseOut();
} else if (newLocalMessage) {
// This indicates the current client just sent a new message, but we are
// scrolled up in the ChatList. We'll scroll back down to show the new
// message
flatList.scrollToOffset({
offset: scrollPos + adjustScrollPos,
animated: false,
});

if (newLocalMessage || scrollPos <= 0) {
flatList.scrollToOffset({ offset: 0 });
LayoutAnimation.easeInEaseOut();
} else {
flatList.scrollToOffset({
offset: scrollPos + adjustScrollPos,
animated: false,
});
if (newRemoteMessageCount > 0) {
this.setState(prevState => ({
newMessageCount: prevState.newMessageCount + newRemoteMessageCount,
}));
this.toggleNewMessagesPill(true);
}
} else if (newRemoteMessageCount > 0) {
this.setState(prevState => ({
newMessageCount: prevState.newMessageCount + newRemoteMessageCount,
}));
this.toggleNewMessagesPill(true);
}
}

Expand Down

0 comments on commit 34bc5a4

Please sign in to comment.