Ввод React Native OTP – курсор не центрирован в поле ввода текста ⇐ CSS

[Anonymous]

Я создаю компонент ввода OTP в React Native с четырьмя полями TextInput, но столкнулся с проблемой, когда курсор не центрируется внутри поля. Вместо этого он выравнивается по правой стороне поля.
Вот соответствующий код, который я использую:

Код: Выделить всё

{[...new Array(4)].map((_, index) => (
 { inputs.current[index] = ref; }}
style={[styles.otpInput, focusedIndex === index && { borderColor: tertiary }, emptyOtp && { borderColor: '#D00000' }, invalidOtp && { borderColor: '#D00000' }]}
key={index}
keyboardType="number-pad"
maxLength={1}
selectTextOnFocus
contextMenuHidden
testID={`OTPInput-${index}`}
onChangeText={text => handleChangeText(text, index)}
onKeyPress={e => handleKeyPress(e, index)}
placeholder={focusedIndex !== index ? '•' : ''}
onFocus={() => setFocusedIndex(index)}
onBlur={() => setFocusedIndex(-1)}
/>
))}

Код: Выделить всё

otpContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 8,
marginTop: 40,
textAlign: 'center',
},
otpInput: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
paddingHorizontal: 16,
textAlign: 'center',
fontSize: 24,
color: '#000',
lineHeight: 55,
width: 55,
height: 55,
}

Курсор TextInput кажется немного смещенным от центра и наклоненным вправо. Я уже убедился, что textAlign: 'center' установлен, но он по-прежнему не работает должным образом.
Что я пробовал
Что я пробовал:

• Удаление отступов и настройка lineHeight.
• Обеспечение ширины и высоты соответствуют размеру шрифта.
• Настройка свойств textAlign.

Кто-нибудь сталкивался с этой проблемой раньше или есть какие-либо предложения по исправлению выравнивания курсора?[*]Настройка свойств textAlign.

Кто-нибудь сталкивался с этой проблемой раньше или есть какие-либо предложения по исправлению выравнивания курсора?[*]Настройка свойств textAlign.

Кто-нибудь сталкивался с этой проблемой раньше или есть какие-либо предложения по исправлению выравнивания курсора? п>

Подробнее здесь: https://stackoverflow.com/questions/792 ... tinput-box