Open Rahul-Vignesh opened 2 years ago
Have same issue too.
I'm sorry but i cannot spend any time on this project for the next few months So it would be helpful if you can find a solution. 😹
As you can see in the above screenshot, there is a visible gap between 1 and 0 which is odd. How can I fix it?
Occurs in both IOS and android devices.
This is because there is 0-9 in every digit place, just hidden. I believe a static width is defined for every digit place, so every number, fat or thin, fits inside that width. So probably that's why there is this gap. I had to remove this package just because of that. But If anyone can find a way where width are adjusted dynamically then it'd solve it for all of us
Same problem here... hard to understand from the code how to fix it :(
What you can do is specify fontVariant: ['tabular-nums']
in the fontStyle
prop. For example:
pointsCounter: {
fontSize: 42,
fontWeight: 'bold',
fontVariant: ['tabular-nums'],
},
It'll align the digits in a more consistent way.
What you can do is specify
fontVariant: ['tabular-nums']
in thefontStyle
prop. For example:pointsCounter: { fontSize: 42, fontWeight: 'bold', fontVariant: ['tabular-nums'], },
It'll align the digits in a more consistent way.
Great response. Maybe this should be made the default?
` <View key={index} style={{ height, width: Platform.OS == "android" ? n == 1 ? 16 : "auto" : n == 1 ? 18 : "auto", overflow: 'hidden' }}> <Animated.View style={[ { transform: [ { translateY: animations[index]!, }, ], marginHorizontal: n == 1 ? -2 : 0 }, ]}
{NUMBERS.map((number, i) => ( <Text style={StyleSheet.flatten([ fontStyle, { height }, ])} key={i}
{number} ))} </Animated.View> `
Working fine by adding width and marginHorizontal
As you can see in the above screenshot, there is a visible gap between 1 and 0 which is odd. How can I fix it?
Occurs in both IOS and android devices.