-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Alignment and Snap Problem in RulerPicker Component #3
Comments
same issue in my project |
@abhay-rana @hazimal only happening on Android? |
Tested only with android |
@Skipperlla @enestatli Is this being addressed? I can confirm I am experiencing this issue on android as well, iOS is fine |
Yes I'm also facing the same issue, @rnheroes |
how do you solve this? |
I'm having the same problem. Did you come up with a solution? |
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.
|
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
The text was updated successfully, but these errors were encountered: