Merge pull request #1795 from wix/fix/Agenda_keyExtractor

Agenda - fix keyExtractor for reservation list

Author: lidord-wix

example/src/screens/agenda.tsx

@@ -37,6 +37,7 @@ export default class AgendaScreen extends Component<State> {
         // theme={{calendarBackground: 'red', agendaKnobColor: 'green'}}
         //renderDay={(day, item) => (<Text>{day ? day.day: 'item'}</Text>)}
         // hideExtraDays={false}
+        // showOnlySelectedDayItems
       />
     );
   }

src/agenda/reservation-list/index.tsx

@@ -44,6 +44,8 @@ export type ReservationListProps = ReservationProps & {
   refreshing?: boolean;
   /** If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly */
   onRefresh?: () => void;
+  /** Extractor for underlying FlatList. Ensure that this is unique per item, or else scrolling may have duplicated and / or missing items.  */
+  keyExtractor?: (item: DayAgenda, index: number) => string;
 };
 
 interface DayAgenda {
@@ -75,7 +77,8 @@ class ReservationList extends Component<ReservationListProps, State> {
     onMomentumScrollEnd: PropTypes.func,
     refreshControl: PropTypes.element,
     refreshing: PropTypes.bool,
-    onRefresh: PropTypes.func
+    onRefresh: PropTypes.func,
+    keyExtractor: PropTypes.func
   };
 
   static defaultProps = {
@@ -258,7 +261,9 @@ class ReservationList extends Component<ReservationListProps, State> {
     );
   };
 
-  keyExtractor = (_item: DayAgenda, index: number) => String(index);
+  keyExtractor = (item: DayAgenda, index: number) => {
+    return this.props.keyExtractor?.(item, index) || `${item?.reservation?.day}${index}`;
+  }
 
   render() {
     const {items, selectedDay, theme, style} = this.props;