diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index 2337b89b0..391f3195a 100644
--- a/app/components/post_list/post_list.js
+++ b/app/components/post_list/post_list.js
@@ -26,6 +26,8 @@ const NewMessagesDividerWithLayout = withLayout(NewMessagesDivider);
const PostWithLayout = withLayout(Post);
const INITAL_BATCH_TO_RENDER = 15;
+const NEW_MESSAGES_HEIGHT = 28;
+const DATE_HEADER_HEIGHT = 28;
export default class PostList extends PureComponent {
static propTypes = {
@@ -80,14 +82,12 @@ export default class PostList extends PureComponent {
if (this.props.channelId !== nextProps.channelId) {
this.itemMeasurements = {};
this.newMessageScrolledTo = false;
+ this.scrollToBottomOffset();
}
}
- componentDidUpdate(prevProps) {
- const initialPosts = !prevProps.postIds.length && prevProps.postIds !== this.props.postIds;
- if ((prevProps.channelId !== this.props.channelId || initialPosts) && this.refs.list) {
- this.scrollToBottomOffset();
- } else if ((this.props.measureCellLayout || this.props.isSearchResult) && this.state.scrollToMessage) {
+ componentDidUpdate() {
+ if ((this.props.measureCellLayout || this.props.isSearchResult) && this.state.scrollToMessage) {
this.scrollListToMessageOffset();
}
}
@@ -110,17 +110,13 @@ export default class PostList extends PureComponent {
}
scrollListToMessageOffset = () => {
- const index = this.moreNewMessages ? this.props.postIds.length : this.newMessagesIndex;
+ const index = this.moreNewMessages ? this.props.postIds.length - 1 : this.newMessagesIndex;
if (index !== -1) {
- let offset = this.getMeasurementOffset(index);
+ const offset = this.getMeasurementOffset(index);
const windowHeight = this.state.postListHeight;
- if (index !== this.props.postIds.length - 1) {
- if (offset < windowHeight) {
- return; // no need to scroll since item is in view
- } else if (offset > windowHeight) {
- offset = (offset - (windowHeight / 2)) + this.itemMeasurements[index];
- }
+ if (index !== this.props.postIds.length - 1 && offset < windowHeight) {
+ return; // post is already in view, no need to scroll.
}
InteractionManager.runAfterInteractions(() => {
@@ -191,13 +187,12 @@ export default class PostList extends PureComponent {
// needs to be added to the index for the length check to be correct.
this.moreNewMessages = this.props.postIds.length === index + 2;
+ this.itemMeasurements[index] = NEW_MESSAGES_HEIGHT;
return (
);
} else if (item.indexOf(DATE_LINE) === 0) {
@@ -216,12 +211,11 @@ export default class PostList extends PureComponent {
};
renderDateHeader = (date, index) => {
+ this.itemMeasurements[index] = DATE_HEADER_HEIGHT;
return (
);
};
diff --git a/app/components/post_list/with_layout.js b/app/components/post_list/with_layout.js
index 562ec6a90..149765bf1 100644
--- a/app/components/post_list/with_layout.js
+++ b/app/components/post_list/with_layout.js
@@ -5,14 +5,20 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
+import {emptyFunction} from 'app/utils/general';
+
function withLayout(WrappedComponent) {
return class WithLayoutComponent extends PureComponent {
static propTypes = {
index: PropTypes.number.isRequired,
- onLayoutCalled: PropTypes.func.isRequired,
+ onLayoutCalled: PropTypes.func,
shouldCallOnLayout: PropTypes.bool
};
+ static defaultProps = {
+ onLayoutCalled: emptyFunction
+ }
+
onLayout = (event) => {
const {height} = event.nativeEvent.layout;
this.props.onLayoutCalled(this.props.index, height);