[WIP] feat: integrate @legendapp/list for optimized chat rendering#355
[WIP] feat: integrate @legendapp/list for optimized chat rendering#355xcarpentier wants to merge 3 commits intomainfrom
Conversation
xcarpentier
commented
Sep 25, 2025
- Added @legendapp/list as a dependency for improved performance in chat rendering.
- Updated ChatSettingsContext to include useLegendList state management.
- Modified ChatDetail and EmptyChatContainer components to utilize useLegendList.
- Implemented MessageContainerSwitch to dynamically choose between the original FlatList and the new Legend List implementation.
- Enhanced chat settings page to allow users to toggle optimized chat rendering.
- Refactored MessageContainer and related components to support the new rendering strategy.
There was a problem hiding this comment.
Pull Request Overview
This PR integrates the @legendapp/list library as an alternative to React Native's FlatList for optimized chat rendering performance. The implementation provides users with a toggle to choose between the original FlatList and the new Legend List implementation.
- Added @legendapp/list dependency and created MessageContainerSwitch for dynamic implementation selection
- Enhanced chat settings to include a toggle for optimized rendering with persistent user preference storage
- Refactored Item components by extracting shared DayWrapper logic into reusable ItemBase module
Reviewed Changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-native-gifted-chat/src/components/Item/index.tsx | Removed inline DayWrapper component and updated imports to use shared ItemBase |
| packages/react-native-gifted-chat/src/components/Item/ItemLegend.tsx | New component implementing Legend List-specific item rendering |
| packages/react-native-gifted-chat/src/components/Item/ItemBase.tsx | Shared base components and utilities for both FlatList and Legend List implementations |
| packages/react-native-gifted-chat/src/MessageContainerSwitch.tsx | Dynamic switch component that selects between original and Legend List implementations |
| packages/react-native-gifted-chat/src/MessageContainerLegend.tsx | Complete Legend List implementation with performance optimizations |
| packages/react-native-gifted-chat/src/MessageContainerConfig.ts | Configuration file for default implementation selection |
| packages/react-native-gifted-chat/src/GiftedChat.tsx | Updated to support useLegendList prop and use MessageContainerSwitch |
| packages/mobile/src/pages/profile/chat-settings.page.tsx | Enhanced settings page with optimized rendering toggle |
| packages/mobile/src/hooks/chat/useChatSettings.ts | Extended hook to manage Legend List preference |
| packages/mobile/src/components/Settings/ChatSettingsContext.tsx | Updated context to include Legend List state management |
| packages/mobile/src/components/Chat/EmptyChatContainer.tsx | Conditional styling based on Legend List usage |
| packages/mobile/src/components/Chat/ChatDetail.tsx | Integrated useLegendList prop from context |
| package.json | Added @legendapp/list dependency |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
packages/react-native-gifted-chat/src/components/Item/ItemBase.tsx
Outdated
Show resolved
Hide resolved
packages/react-native-gifted-chat/src/MessageContainerLegend.tsx
Outdated
Show resolved
Hide resolved
packages/react-native-gifted-chat/src/MessageContainerLegend.tsx
Outdated
Show resolved
Hide resolved
packages/react-native-gifted-chat/src/MessageContainerSwitch.tsx
Outdated
Show resolved
Hide resolved
packages/react-native-gifted-chat/src/MessageContainerLegend.tsx
Outdated
Show resolved
Hide resolved
164b9d1 to
0e2e4ba
Compare
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 13 out of 14 changed files in this pull request and generated 3 comments.
Comments suppressed due to low confidence (1)
packages/react-native-gifted-chat/src/MessageContainerLegend.tsx:1
- Commented-out console.log statements should be removed from production code to keep the codebase clean.
import {
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
packages/react-native-gifted-chat/src/MessageContainerConfig.ts
Outdated
Show resolved
Hide resolved
5e5dd50 to
4a1ed9b
Compare
4a1ed9b to
35b52c6
Compare
35b52c6 to
94a1da3
Compare
94a1da3 to
5715c7b
Compare
- Added @legendapp/list as a dependency for improved performance in chat rendering. - Updated ChatSettingsContext to include useLegendList state management. - Modified ChatDetail and EmptyChatContainer components to utilize useLegendList. - Implemented MessageContainerSwitch to dynamically choose between the original FlatList and the new Legend List implementation. - Enhanced chat settings page to allow users to toggle optimized chat rendering. - Refactored MessageContainer and related components to support the new rendering strategy.
5715c7b to
886426f
Compare