Alignment and Snap Problem in RulerPicker Component

[abhay-rana]

I'm facing an alignment issue and snap problem with the RulerPicker component in the react-native-ruler-picker library. The teeth of the ruler picker are not aligned properly, and the snapping behavior is not accurate.

Steps to reproduce

1:) Include the RulerPicker component in your React Native project.

2:) <RulerPicker
min={100}
max={5000}
step={100}
fractionDigits={0}
unit="ML"
indicatorHeight={52}
textAlign="bottom"
gapBetweenSteps={5}
indicatorColor="#D1FF70"
shortStepColor="#D1FF70"
longStepColor="#D1FF70"
valueTextStyle={/* your value text style /}
unitTextStyle={/ your unit text style */}
/>

3:) Observe the misalignment of the teeth and the snapping behavior.

Expected Behavior:

The teeth of the ruler picker should align perfectly with the bottom teeth.
When scrolling, the snapping behavior should accurately snap to the teeth positions.

as you can seen in the image the teeth is not aligned vertically

React Native version: 0.72
Operating System: Windows 11
Device: Android 13

[hazimal]

same issue in my project

[enestatli]

@abhay-rana @hazimal only happening on Android?

[hazimal]

Tested only with android

[moulie415]

@Skipperlla @enestatli Is this being addressed? I can confirm I am experiencing this issue on android as well, iOS is fine

[ErMapsh]

Yes I'm also facing the same issue, @rnheroes

[ErMapsh]

same issue in my project

how do you solve this?

[haerim95]

@abhay-rana @hazimal only happening on Android?

I'm having the same problem. Did you come up with a solution?
Only on Android, it doesn't align and doesn't even scroll.

[tungmin97]

This is an issue with how FlashList calculate layout on Android. On a similar list in our project, I have to use getLayoutManager to get the correct pixel distance for that specific index.

[haerim95]

This is an issue with how FlashList calculate layout on Android. On a similar list in our project, I have to use getLayoutManager to get the correct pixel distance for that specific index.

This library currently uses AnimatedFlashList, not FlashList. I don't think AnimatedFlashList has a getLayoutManager option.

[tungmin97]

This is an issue with how FlashList calculate layout on Android. On a similar list in our project, I have to use getLayoutManager to get the correct pixel distance for that specific index.

This library currently uses AnimatedFlashList, not FlashList. I don't think AnimatedFlashList has a getLayoutManager option.

Ofc AnimatedFlashList doesn't have this prop,it comes from recyclerlistview, the inner list rendering engine. Anyway, here is the magic code that fixed my issue on Android, it does look very weird though.

listRef.current?.scrollToOffset({
    offset: listRef?.current?.state?.layoutProvider
        ?.getLayoutManager()
        ?.getOffsetForIndex(index)?.x ?? index * ITEM_WIDTH,
    animated: true,
});

[carlo-rsd]

Did anyone get this to work on Android?