Caret position is wrong on next letters on iOS and Android

[kopax-polyconseil]

Steps to reproduce

const codeInputPlaceholder = ('0' + '\u00a0'.repeat(5)).repeat(5) + '0'
const codeInputMask = ('9' + ' '.repeat(5)).repeat(5) + '9'

// ...

            <MaskedTextInput
              onChangeText={(text, rawText) => {
                onChangeValue(rawText ?? '')
              }}
              placeholder={codeInputPlaceholder}
              placeholderTextColor={ColorsEnum.GREY_DARK}
              mask={codeInputMask}
              keyboardType="number-pad"
              testID="code-input"
            />

Expected behaviour

It should have caret positionned before letter when typing

Actual behaviour

Caret is located after the last typed character:

Caret should be before next character to be typed.

Ex: in previous screen, it should be located right before the 5, not right after the 1

Environment

• React Native version: 0.64.2
• React Native platform + platform version: Android 9 / iOS 12
• Typescript version : 4.3.5

react-native-mask-text

Version: 0.2.2

Link to repo (highly encouraged)

PR :

pass-culture/pass-culture-app-native#1469

[kopax-polyconseil]

résolved using maxLength and letterSpacing