Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-native - TextInput decimal-pad showing comma instead of a dot on iOS

Some iOS devices seems to be showing a , (comma) instead of a . on the decimal-pad. I believe this is to do with the keyboard language / locale. Is there a way I can force the decimal-pad to show a . regardless of keyboard language / locale?

<TextInput
    rejectResponderTermination={false}
    style={[
        {
            fontSize: entryValueFontSize,
            height: height,
        },
        calculatorStyles.inputsShared,
        calculatorStyles.amountInput,
        theme.inputsShared,
    ]}
    autoCapitalize={'none'}
    placeholder={entryValueLabel}
    placeholderTextColor={theme.placeholderTextColor}
    keyboardType={'decimal-pad'}
    returnKeyType={'done'}
    defaultValue={''}
    value={isNaN(this.state.entryValue) ? '' : this.state.entryValue}
    onChangeText={(entryValue) => {
        this.onEntryValueChange(entryValue);
    }}
/>

Problem:

enter image description here

Desired output:

enter image description here

like image 452
Abdul Sadik Yalcin Avatar asked Aug 14 '20 22:08

Abdul Sadik Yalcin


1 Answers

It is not possible to force keyboard to use comma. It is based on Region for example Czechia has comma. The solution I have created is to replace comma for decimal with point once comma is entered

<TextInput
  onChangeText={(entryValue) => {
    // I am passing keyboardType as prop
    if (keyboardType === 'decimal-pad') {
      this.onEntryValueChange(entryValue.replace(',', '.'));
    } else {
      this.onEntryValueChange(entryValue);
    }
  }}
/>
like image 142
Black Avatar answered Nov 19 '22 07:11

Black