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