[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

[TheShnider]

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

Hi. I have reviewed this issue and would like to work on it.

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

[Wildflower-mariposa]

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

Hello,

I'd like to work on this issue. I can audit all "FlatList" and "SectionList" components, implement stable "keyExtractor" functions, add reliable temporary IDs for optimistic items, and include tests to ensure consistent rendering and prevent key-related warnings.

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

[Jerry-Tekh]

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

Hi maintainer, please I'll like to take this.

I’ll fix React key warnings in rinafcode/teachLink_mobile: add stable keyExtractor to all FlatList/SectionList components, assign client-side UUIDs for optimistic items, remove any index fallback, and add tests + ESLint rule to enforce it.

Please assign me

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