Ruler issues after updating to React Native 0.76 with the new architecture enabled

[danielnegoita]

Hey,
first of all, thank you for this great library!

I am reaching out to report two issues with the ruler after I updated to React Native 0.76 with the New Architecture enabled and Expo SDK 52.

Issue 1: The initial value is set to min instead of the provided one.
Issue 2: When you scroll the text label with the current value flickers.

I have created a gist with the code where the issues arise and also attached a short video.

Gist url: https://gist.github.com/danielnegoita/2c25eca93eb5839a2c4579f5ce652603

ruler.issues.mov

Thanks

[osmant]

Were you able to overcome this issue @danielnegoita ? if so, how ?

[danielnegoita]

I have switched to using the @react-native-picker/picker package. I am not sure if they fixed the issue in the meantime.

[steelzeh]

Issue still present

[danielnegoita]

@oasisMystre Looking at your comment it seems that you don’t understand the concept of a GH issue.
Of course I will not explain it to you here. You will discover for sure in the future when you’ll get some more experience with this.

The GH community has many kinds of developers, from juniors who are just learning to code, to seniors who struggle to learn FE or writing native code for the first time.

Naming them “retards” because you have allocated a few hours (or asked an AI) to fix the issue, does not make you a special developer among the others.

You just found a possible fix for a bug. That’s all!

Thank you for your suggestion. Maybe you will allocate some time to properly test your solution and push a PR to be merged, for us, the “retards”, to benefit from your superior knowledge.

[jannikbryld]

@oasisMystre your solution is not performant because it forces the component tree to rerender, which is exactly the reason why the devs of this library decided to use setNativeProps (for performance!). Please respect the devs that put their time into this to help you.

[jannikbryld]

I've found the issue. The problem is isolated to when you use non-monospaced fonts (font with variable width). Apparently, textRef.current?.setNativeProps has some bug where the width of the TextInput is not properly updated in the same update. Thus, if the text you try to update to is wider than the text in the last update, the text will be cut off at the end.

Quick solution 1: Choose a monospaced font such as 'courier' for the value text.

<RulerPicker valueTextStyle={{ fontFamily: 'courier' }} ... />

Quick solution 2: Supply a width to the value text that is large enough to display the full text

<RulerPicker valueTextStyle={{ width: 120 }} ... />

---

For a PR the width could be calculated dynamically based on the font and supplied to the textRef.current?.setNativeProps, although I hope to see this resolved in the react native library instead, so personally I am using solution 2 above for now.

[mattisaa]

Any update on fixing the issue with initialValue prop being set to min instead of passed down value?
Experiencing the same issue after enabled new architecture in expo 53

[Gautham495]

I solved this with legend list in my package - https://github.com/Gautham495/react-native-legend-ruler-picker.