FlatList Prop extraData not working

[maria-faulisi]

Hello! I am trying to recreate the image below. I need to be able to update the lists to scroll infinitely in the past and future and am trying to calculate and trigger the Flatlist to render using the extraData prop, but it does not work. The code below is a WIP and I am currently trying to manipulate the second WheelPicker that displays years.

  const getOptions = useCallback(
    (margin: number, timeUnit: string, dateSelected: Dayjs) => {
      const pastMargin = []
      const nextMargin = []
      for (let index = margin; index > 0; index--) {
        pastMargin.push(dateSelected.subtract(index, timeUnit))
        nextMargin.unshift(dateSelected.add(index, timeUnit))
      }
      const allMarginDates = pastMargin.concat(selectedDate, nextMargin)
      return allMarginDates
    },
    [selectedDate]
  )

  const yearDateArr = getOptions(4, 'years', selectedDate)
  let yearOptions = yearDateArr.map((option) => option.format('YYYY'))

  const [selectedWeekIndex] = useState(4)
  const [selectedYearIndex] = useState(4)
  const [flatListRender, setFlatListRender] = useState(false)

  const [yearDates, setYearDates] = useState<Dayjs[]>(yearDateArr)
  const [yearOptionsArr, setYearOptionsArr] = useState<string[]>(yearOptions)

  const weekOptionsArr = getOptions(4, 'weeks', selectedDate)
  const weekOptions = weekOptionsArr.map((option) => {
    const [weekOptionStart, weekOptionEnd] = getBoundsContainingDate(option, {
      unit: 'week',
      weekStartDay: company?.week_start_day,
    })
    return formatDateRange(weekOptionStart, weekOptionEnd, false)
  })

  const onYearChanged = (i: number) => {
    const newDate = yearDates[i]
    setSelectedDate(newDate)
    const newYearDateArr = getOptions(4, 'years', newDate)
    setYearDates(newYearDateArr)
    const newYearDateOptions = newYearDateArr.map((option) =>
      option.format('YYYY')
    )
    setYearOptionsArr(newYearDateOptions)
    setFlatListRender(!flatListRender)
  }

  return (
    <Animated.View
      style={[styles.container, {height}, bg.tertiary, paddingT.lg]}
    >
      <View style={[flex.centeredRow, justify.between, paddingH.md]}>
        <Button variant="link" label={t('common.cancel')} size="lg" />
        <Text weight="semi">{yearOptionsArr[0]}</Text>
        <Button variant="link" label={t('common.update')} size="lg" />
      </View>
      <View style={[flex.row]}>
        <WheelPicker
          flatListProps={{
            extraData: flatListRender,
          }}
          key={'weekWheelPicker'}
          containerStyle={styles.wheelContainer}
          selectedIndex={selectedWeekIndex}
          itemStyle={styles.weekItemStyle}
          itemTextStyle={styles.weekItemTextStyle}
          selectedIndicatorStyle={styles.selectedIndicator}
          options={weekOptions}
          onChange={() => console.log('Week changed')}
        />

        <WheelPicker
          flatListProps={{extraData: yearOptionsArr}}
          key={'yearWheelPicker'}
          containerStyle={styles.wheelContainer}
          selectedIndex={selectedYearIndex}
          itemStyle={styles.yearItemStyle}
          itemTextStyle={styles.yearItemTextStyle}
          selectedIndicatorStyle={styles.selectedIndicator}
          options={yearOptionsArr}
          onChange={onYearChanged}
        />
      </View>
    </Animated.View>
  )
}

[maria-faulisi]

Closing as this comment solved the issue.