Timer not Proper Showing

[Biplovkumar]

only one digit is showing in minutes and second.

[talalmajali]

@Biplovkumar What is the model of the device?

[Biplovkumar]

Android device One plus 5t . Sorry for late reply.

[Biplovkumar]

Any update ?

[talalmajali]

@Biplovkumar is this happening on a specific countdown component size? What's the size that are you using here? and can you make sure that the device font size (in settings) is set to default?

[Biplovkumar]

@talalmajali

1. Size:- height/40

2. device font size:- default Code :- const SCREEN_HEIGHT = Dimensions.get('window').height;

                <CountDown
                   //  style = {{width: 200 ,height: 100}}
                   timeToShow={['M', 'S']}
                   digitTxtColor={'rgba(251, 116, 0,0.8)'}
                   timeTxtColor={'rgba(255,165,0,0.5)'}
                   digitBgColor={'rgba(0,0,0,0.1)'}
                   until={this.state.timelimit}
                   onFinish={() => { this.state.type === "essay" ? console.log("Sorry No timer") : this.handleQuizSubmit() }}
                   size={SCREEN_HEIGHT / 40}
                 />

[talalmajali]

@Biplovkumar i ran the same code on same device (1080 x 2160 pixels) screen OnePlus 5T and it's showing without any problems, it's not screen scaling problem, i think what u meant to say that the minutes and seconds should have leading zero before each of them, so in the image the timer should be rendered as 01 05, right?

[samybenatt]

Hi,

This problem is common on OnePlus phones and related to React Native. Here is the RN issue : https://github.com/facebook/react-native/issues/15114

Common fixes for this issue :

• Change text font and/or app font
• Give the text component containing the cut offed text a custom width
• Add a space just after the text cut offed

You have all the other possible solutions on the link above.

Tested on my device and it worked !

[Biplovkumar]

@samay ,thanks this is the solution.