Skip to content

fix: remove inverted list android workaround #3199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 22, 2025
Merged

fix: remove inverted list android workaround #3199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1db08a2
fix: remove inverted list android workaround
khushal87 Aug 21, 2025
1b45e96
test: update tests snapshot
khushal87 Aug 21, 2025
b3aea79
fix: improve component hierarchy
khushal87 Aug 21, 2025
a4c9940
test: update snapshot
khushal87 Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 10 additions & 42 deletions package/src/components/MessageList/MessageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import {
FlatListProps,
FlatList as FlatListType,
Platform,
ScrollViewProps,
StyleSheet,
View,
Expand Down Expand Up @@ -739,9 +738,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [targetedMessage]);

// TODO: do not apply on RN 0.73 and above
const shouldApplyAndroidWorkaround = inverted && Platform.OS === 'android';

const renderItem = useCallback(
({ index, item: message }: { index: number; item: LocalMessage }) => {
if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode)) {
Expand Down Expand Up @@ -785,10 +781,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
);

return (
<View
style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
testID={`message-list-item-${index}`}
>
<View testID={`message-list-item-${index}`}>
{message.type === 'system' ? (
<MessageSystem
message={message}
Expand Down Expand Up @@ -832,7 +825,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
myMessageTheme,
onThreadSelect,
screenPadding,
shouldApplyAndroidWorkaround,
shouldShowUnreadUnderlay,
threadList,
],
Expand Down Expand Up @@ -1151,33 +1143,14 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
}
}

const ListFooterComponent = useCallback(
() => (
<View style={shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined}>
<FooterComponent />
</View>
),
[shouldApplyAndroidWorkaround, FooterComponent],
);
const ListFooterComponent = useCallback(() => <FooterComponent />, [FooterComponent]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have to wrap these components in useCallback()?
I'm pretty sure that

const ListFooterComponent = FooterComponent;

will work the same, and would be more performant too.


const ListHeaderComponent = useCallback(
() => (
<View style={shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined}>
<HeaderComponent />
</View>
),
[shouldApplyAndroidWorkaround, HeaderComponent],
);
const ListHeaderComponent = useCallback(() => <HeaderComponent />, [HeaderComponent]);

const ItemSeparatorComponent = additionalFlatListProps?.ItemSeparatorComponent;
const WrappedItemSeparatorComponent = useCallback(
() => (
<View style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}>
{ItemSeparatorComponent ? <ItemSeparatorComponent /> : null}
</View>
),
[ItemSeparatorComponent, shouldApplyAndroidWorkaround],
);
const WrappedItemSeparatorComponent = useCallback(() => {
return ItemSeparatorComponent ? <ItemSeparatorComponent /> : null;
}, [ItemSeparatorComponent]);

// We need to omit the style related props from the additionalFlatListProps and add them directly instead of spreading
let additionalFlatListPropsExcludingStyle:
Expand All @@ -1195,13 +1168,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
}

const flatListStyle = useMemo(
() => [
styles.listContainer,
listContainer,
additionalFlatListProps?.style,
shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined,
],
[additionalFlatListProps?.style, listContainer, shouldApplyAndroidWorkaround],
() => [styles.listContainer, listContainer, additionalFlatListProps?.style],
[additionalFlatListProps?.style, listContainer],
);

const flatListContentContainerStyle = useMemo(
Expand Down Expand Up @@ -1241,7 +1209,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
/** Disables the MessageList UI. Which means, message actions, reactions won't work. */
data={processedMessageList}
extraData={disabled}
inverted={shouldApplyAndroidWorkaround ? false : inverted}
inverted={inverted}
ItemSeparatorComponent={WrappedItemSeparatorComponent}
keyboardShouldPersistTaps='handled'
keyExtractor={keyExtractor}
Expand All @@ -1264,7 +1232,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
onViewableItemsChanged={stableOnViewableItemsChanged}
ref={refCallback}
renderItem={renderItem}
showsVerticalScrollIndicator={!shouldApplyAndroidWorkaround}
showsVerticalScrollIndicator={false}
style={flatListStyle}
testID='message-flat-list'
viewabilityConfig={flatListViewabilityConfig}
Expand Down
Loading