[Inverted FlashList] How to show content on upper side when total content height is less than list height?

[dmahajan980]

Hello,

Thanks for this amazing library. We are using this to implement the chat messages list and are hitting some design limitations.

Desired Behavior

The messages list has two requirements:

1. When the messages are not enough to cover the whole list, show them on top.
2. Otherwise, the chatroom should show the last messages in the first render.

The images below illustrate the above requirements:

Short Chat	Long Chat
Messages should be displayed on top	Last message should be displayed first

(Kindly ignore the absence of input box in right-side screenshot. It's taken from the simulator and is a WIP.)

Actual Behavior

In the code, the inverted prop is enabled to render the list in reverse order and the long-chat case is achieved. However, in the short-chat case, the messages are also rendering on the bottom side.

In the desired behavior, the messages should be displayed on top.

Tried Solutions

So far, we have tried the following:

1. Reversed the array passed to data prop, removed inverted prop, and set initialScrollIndex to the maximum index value (using data.length - 1). This didn't work as the list displayed somewhere around middle and not the end. Moreover, the list displayed the top messages first and then scrolled down which isn't very ideal.
2. Calling scrollToBottom() method on the list ref inside useEffect. This also suffered the same problems we faced in previous point.

Similar discussion/issue

#665

Reproducible

https://snack.expo.dev/@dmahajan98/chat-room-reproducible

---

I think the solution might be along the lines of not using inverted prop. However, the solutions that I tried and am aware of could not render the bottom of list correctly. Also, these solutions do not show the bottom in first render but in subscequent renders.

Any help regarding this would be appreciated very much.

Thanks :)

[lisacher7]

Hi, did you manage to find a workaround for this?

[chaesngmin]

Same issue. Any solution found?

[iamjoshua]

Same issue. This should be a simple css matter of applying justifyContent as flex-end (because inverted), but FlashList doesn't honor this container style. I found that a simple conditional switch between FlashList and a standard FlatList when items under some length was a good-enough workaround, but it adds silly complexity to solve something that shouldn't be an issue.

[nduyvu1511]

you can try this:
<View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}> <FlashList /> </View>

[nduyvu1511]

Remember, when wrapping FlashList inside a View with a style like that, adding a new item with a dynamic height (e.g., sending an image message) requires recalculation. Otherwise, FlashList will leave a blank space because FlashList can't receive the height information to calculate the layout.

[domleboss97]

@nduyvu1511 This does not work if you want the parent container to take up the full screen

[domleboss97]

I need the container around the flashlist to have flex-grow set on it, but I want the items of the flashlist aligned to the top within that container. As far as I can tell, there is not a way to achieve this.

[hongppa324]

You can put ListHeaderComponent when using inverted FlashList.

[hongppa324]

@dmahajan980 Hi. Did you solve this issue?

[henninghall]

I got it to work with following patch.

Not that this is a quick fix that top aligns all inverted lists. We make this better by allowing flexGrow and flexDirection to be set from outer api or create a new additional prop.

@naqvitalha what do you think? I can prepare a PR if you would like this feature?

This is a limitation that FlatList currently doesn't have. For Flatlist you can set flexGrow and flexDirection in contentContainerStyle and achieve this behaviour.

diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index 81d937fa0996aa4340eeb790a53d781fe37c4ea0..0000000000000000000000000000000000000000
diff --git a/dist/FlashList.js b/dist/FlashList.js
index 4f33d6bc679ab1f4daafbacf73172dcb08dc0c1f..702b38209fb6fab1af3ae2a760b7e0115dcf3bef 100644
--- a/dist/FlashList.js
+++ b/dist/FlashList.js
@@ -383,7 +383,10 @@ var FlashList = /** @class */ (function (_super) {
                 ? tslib_1.__assign({}, this.getTransform()) : tslib_1.__assign({ flex: 1, overflow: "hidden" }, this.getTransform()) },
             react_1.default.createElement(recyclerlistview_1.ProgressiveListView, tslib_1.__assign({}, restProps, { ref: this.recyclerRef, layoutProvider: this.state.layoutProvider, dataProvider: this.state.dataProvider, rowRenderer: this.emptyRowRenderer, canChangeSize: true, isHorizontal: Boolean(horizontal), scrollViewProps: tslib_1.__assign({ onScrollBeginDrag: this.onScrollBeginDrag, onLayout: this.handleSizeChange, refreshControl: this.props.refreshControl || this.getRefreshControl(), 
                     // Min values are being used to suppress RLV's bounded exception
-                    style: { minHeight: 1, minWidth: 1 }, contentContainerStyle: tslib_1.__assign({ backgroundColor: this.contentStyle.backgroundColor, 
+                    style: { minHeight: 1, minWidth: 1,  }, contentContainerStyle: tslib_1.__assign({ backgroundColor: this.contentStyle.backgroundColor, 
+                        // This patch makes inverted list be top aligned like non-inverted lists.
+                        flexGrow: restProps.inverted ? 1 : undefined,
+                        flexDirection: restProps.inverted ? 'column-reverse' : undefined,
                         // Required to handle a scrollview bug. Check: https://github.com/Shopify/flash-list/pull/187
                         minHeight: 1, minWidth: 1 }, (0, ContentContainerUtils_1.getContentContainerPadding)(this.contentStyle, horizontal)) }, this.props.overrideProps), forceNonDeterministicRendering: true, renderItemContainer: this.itemContainer, renderContentContainer: this.container, onEndReached: this.onEndReached, onEndReachedThresholdRelative: onEndReachedThreshold || undefined, extendedState: this.state.extraData, layoutSize: estimatedListSize, maxRenderAhead: 3 * finalDrawDistance, finalRenderAheadOffset: finalDrawDistance, renderAheadStep: finalDrawDistance, initialRenderIndex: (!this.isInitialScrollIndexInFirstRow() && initialScrollIndex) ||
                     undefined, initialOffset: initialOffset, onItemLayout: this.onItemLayout, onScroll: this.onScroll, onVisibleIndicesChanged: this.viewabilityManager.shouldListenToVisibleIndices

[winterdouglas]

I applied this fix by using:

overrideProps={{contentContainerStyle: styles.contentContainerStyle}}

just making sure to respect the internal props and applying your two suggested props, so that did not require a patch.

I was impressed that column-reverse didn't actually invert items which comes in handy for this, so that did the trick for now. Applying the same workaround on RN's FlatList actually inverts items, so that scares me a tiny bit :D

[dition0221]

I fixed it like this

<FlashList
  ......
  contentContainerStyle={styles.flashList}
  overrideProps={{ contentContainerStyle: styles.override }}
  inverted
  ......
/>

const styles = StyleSheet.create({
  flashList: {
    padding: 20
  },
  override: {
    flexGrow: 1,
    paddingHorizontal: 20,
    justifyContent: 'flex-end'
  },
});

[vanBlayt]

@dition0221 tks, solve my problem.

[siddhant-rl]

@dition0221 Thank you so much - that solved the issue! You're a lifesaver ❤️