[Bug] FlatList missing keyExtractor on notification and bookmark lists — triggers React key warnings

[RUKAYAT-CODER]

Overview

Multiple FlatList instances across the app (notifications, bookmarks, search results) render without a keyExtractor prop, or with one that returns item.id?.toString() where id may be undefined for optimistically-added items. React Native falls back to array index as key, causing incorrect animation and update behavior on insert, remove, and reorder.

Specifications

Features:

• All FlatList instances have explicit keyExtractor returning stable unique string
• Optimistically-added items assigned client-side UUID as temporary key
• No fallback to array index under any condition

Tasks:

• Audit all FlatList and SectionList components across src/components/
• Add keyExtractor={(item) => item.id.toString()} to each
• For optimistic items, assign id: 'temp-${Date.now()}-${Math.random().toString(36).slice(2)}' at creation
• Add ESLint custom rule or note to require keyExtractor on all list components
• Add unit test asserting stable key prop on rendered list items

Impacted Files:

• src/components/mobile/MobileNotifications.tsx
• Bookmark and search result list components

Acceptance Criteria

• No React key warning in dev console for any list component
• Optimistic items have stable non-index keys
• Item animation correct on insert, delete, and reorder
• Code review checklist updated to verify keyExtractor presence

[Nacho1499]

@Nacho1499 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainer, am Nacho. a full-stack developer and react-native/ expo developer.

I would like to work on this issue.

I believe I am a good fit because I have experience working with React and React Native applications, including optimizing list rendering, improving component performance, and writing maintainable, well-tested code. I'm familiar with the importance of stable keys in FlatList and how they affect rendering behavior, animations, and optimistic UI updates.

For this issue, I plan to:

• Audit all FlatList and SectionList components to ensure each has a stable keyExtractor.
• Replace any index-based or potentially undefined keys with reliable unique identifiers.
• Implement stable temporary IDs for optimistically created items to prevent key changes during updates.
• Add or update unit tests to verify stable key behavior across the affected lists.
• Update the project's linting guidance or review checklist to help prevent similar issues in future contributions.

I will keep the implementation focused, well-tested, and consistent with the existing project architecture while ensuring there are no regressions in list rendering or animations.

Thank you for your consideration.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nacho1499 to this issue.

[lamborghini21]

@lamborghini21 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello boss, I'd love to work on this issue and I promise to deliver results in 24 hours.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @lamborghini21 to this issue.

[xtrial01]

@xtrial01 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi, i would like to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @xtrial01 to this issue.

[collinsezedike]

@collinsezedike has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Here's my plan:

• Audit every FlatList and SectionList component in src/components/, including notifications, bookmarks, and search results
• Add an explicit keyExtractor returning item.id.toString() to each
• Assign optimistically-added items a temporary unique id at creation time, guaranteeing keyExtractor always receives a defined value
• Add an ESLint rule or update the code review checklist to require keyExtractor on all future list components
• Add unit tests verifying stable, non-index keys, and manually confirm correct animation behavior on insert, delete, and reorder

All acceptance criteria covered. Happy to start as soon as I am assigned.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @collinsezedike to this issue.

[abdullahilateefat03-boop]

@abdullahilateefat03-boop has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello, I'm Lateefat. I've reviewed the issue requirements and would like to work on this task. My background in software development equips me to contribute effectively. Please assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @abdullahilateefat03-boop to this issue.