feat: allow to use a custom component for the FlatList

[giovanniRodighiero]

Hello again! I'd like to use this widget inside a BottomSheet from https://ui.gorhom.dev/components/bottom-sheet/modal, but it doesn't work on Android. The reason is that react-native-timer-picker uses FlatList and that doesn't go along really well with the bottomsheet lib implementation, the solution they suggest is to use their own version of FlatList as described here instead of the default one from react-native.

So it would be great to have a prop to use a custom component for the FlatList, I made a simple PR with the needed changes.

The usage then becomes something like:

import { FlatList } from "react-native-gesture-handler"

...

<TimerPicker
    hourLabel=":"
    minuteLabel=""
    secondLabel=""
    hideSeconds
    padWithNItems={1}
    initialValue={value}
    minuteLimit={{ min: 1 }}
    onDurationChange={onDurationChange}
    styles={styles.timePicker}
    FlatListComponent={FlatList}
/>

Let me know what you think about it.

[troberts-28]

Hey @giovanniRodighiero, thank you for the PR!

This definitely makes sense. We'll just need to update the docs to add the new prop and add some kind of disclaimer that the custom FlatList component needs to expose a few key props that are used internally by the DurationScroll component.

Go for it if you're willing to take that on, otherwise I should be able to get round to it sometime in the next week or two.

[giovanniRodighiero]

Hi @troberts-28 , I added a simple description in the README, take your time to review or improve it, no rush on my side for this 👍

[troberts-28]

@giovanniRodighiero this has been merged into v1.9.0. Thank you for the contribution, much appreciated.

The changes to the README were excellent, I only made the odd minor readability improvement.