What is the best way to create a custom picker for measurement selection in React Native?

Question

I am currently building an app which allows users to select their current weight and waist size. The list is long since, for example, the weight will start from 40kg up to 300kg, and each value will have a decimal point from .1 up to .9, e.g 40.0, 40.1, 40.2, 40.3, ... 40.9, 41.0, the whole numbers will be represented in a longer vertical line, while the decimal values in shorter vertical lines. So as you can imagine, the list is going to be really long. I have already implemented 2 ways: FlatList and Carousel using react-native-snap-carousel. They have their pros and cons, FlatList is much performant than the Carousel, but im having a hard time getting the value of the middle line. While the carousel performs poorly, i do have access to the current selected item. So my question here is: how do i implement this performance-wise and i have access with the currently selected item. Take Note also that i have implement FlatList's onViewableItemsChanged and it still doesn't achieve my goal

here is the screenshot of the UI:

Answer 1

In short:

You can check this library out: https://github.com/veizz/react-native-picker-scrollview

In detail:

There's a way to achieve this with some Flatlist props:

• onScrollBeginDrag & onScrollEndDrag: detect when user starts/stops scrolling
• onMomentumScrollBegin & onMomentumScrollBegin : detect scroll speed and momentum
• scrollTo or scrollToIndex functions which requires Flatlist ref.
• onScrollEvent if needed.

---

My opinion is, (which'll be my approach)

First, set the selectedItem as you like.

Then, using those scroll props above to detect which item(index) it's scrolling to. Select that item. Then scrollTo to selected.

Any point where it exceeds the threshold, use scrollTo or scrollToIndex to the next/previous item.

This is my approach, if you have your own, I'll be glad to discuss.

Happy coding!