Gap between certain digits like 1

[Rahul-Vignesh]

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.

[vitaliyirtlach]

Have same issue too.

[heyman333]

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. 😹

[tsachit]

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

[nechmads]

Same problem here... hard to understand from the code how to fix it :(

[mherda]

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.

[Huguet57]

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.

Great response. Maybe this should be made the default?

[munishantier]

<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} </Text> ))} </Animated.View> </View>
Working fine by adding width and marginHorizontal