Digits Not Fully Visible in Android Timer Picker

[lashatatkhashvili]

Description
On some real Android devices, the numbers in the timer picker are not fully visible. It looks like only the first digit of each number is properly displayed, making it difficult to read and set the time correctly. This issue occurs in hours, minutes, and seconds fields.

Expected Behavior
All digits in the timer picker should be fully visible and properly aligned, ensuring a smooth user experience.

Environment
Library Version: 2.0.3
React Native Version: 0.76.6

[troberts-28]

Hi @lashatatkhashvili,

Thanks for raising this. Could you share the props you are providing to the picker?

[lashatatkhashvili]

Hi @troberts-28 ,
Sure:
<TimerPickerModal
visible={showPicker}
setIsVisible={setShowPicker}
modalTitle={t('set_duration')}
onCancel={() => setShowPicker(false)}
closeOnOverlayPress
modalProps={{
overlayOpacity: 0.2,
}}
confirmButtonText={t('done')}
cancelButtonText={t('cancel')}
styles={{
confirmButton: {
backgroundColor: '#5344FA',
color: '#FFF',
width: 135,
textAlign: 'center',
fontSize: 14,
},
cancelButton: {
color: '#0C1024',
borderColor: '#0A102017',
backgroundColor: '#F5F5F5',
width: 135,
textAlign: 'center',
fontSize: 14,
},
}}
/>

It's the same with hideSeconds={true}.
Also, I asked the user about the phone:
Samsung A05S, Android 14.

[troberts-28]

Hey @lashatatkhashvili,

Apologies for the slow response. I'm trying to reproduce this but have so far been unsuccessful. Are you able to reproduce it in this Expo Snack?

As you said, it looks like the second digit is hidden, which would likely be caused by some kind of layout issue. I've tried fiddling with the styles to get mine to exhibit similar behaviour. I can do it but I have to make supply a load of custom styles (make the background of the label container non-transparent, increase its width so it covers the second digit, right-align the label), which you haven't done based on your message.

[lashatatkhashvili]

Hey @troberts-28 ,

No worries! I also tried reproducing the issue on simulators and several real Android devices, but I couldn't replicate it. So far, it seems to be affecting only the one user who reported it.

Let me know if you have any other ideas or if there's anything else I can test!

[alexkuon]

We are facing the same issue in production on Android Tablet, Android 14.
In my head it seems like an issue with the text element width, which is why the text is not fully visible. I played around with the pickerItem style to reproduce a kind of similar behavior.
Since i have no direct access to the device though, i cannot verify this or test fixes.
Maybe applying this style:

pickerItem: {
      backgroundColor: "blue"
}

can help to verify if this is the cause of the issue

[troberts-28]

Hey @alexkuon, thanks for sharing!

I've done some pretty extensive testing with adjusted styling and widths to try to reproduce this and haven't been able to so far...

[thansgit]

I had the same issue, but changing the pickerItem fontSize to a smaller one, the other digit started displaying.