I have a TextInput ponent in my React Native app. And i need to make the field is pre-populated with a mask of 408xx810xxx, 1-3 and 6-8 digits in the field, their change is prohibited to put for users. Can somebody remend the best way how can i do it?

          <TextInput
            style={[SS.input, styles.input]}
            placeholder={props.placeholder} placeholderTextColor={theme.inputPlaceholder}
            underlineColorAndroid='transparent' editable={!props.disabled}
            keyboardType={props.keyboardType || 'default'} autoCapitalize={capitalize}
            keyboardAppearance={props.keyboardAppearance}
            autoCorrect={autoCorrect} selection={state.position}
            secureTextEntry={this.state.guarded}
            value={this.state.value}
            onChangeText={this._onChangeText}
            onFocus={this._onFocus} onBlur={this._onBlur}
            autoFocus={props.autoFocus}
            multiline={props.multiline}
            maxLength={props.maxLength}
            onContentSizeChange={onContentSizeChange}
          />

I have a TextInput ponent in my React Native app. And i need to make the field is pre-populated with a mask of 408xx810xxx, 1-3 and 6-8 digits in the field, their change is prohibited to put for users. Can somebody remend the best way how can i do it?

          <TextInput
            style={[SS.input, styles.input]}
            placeholder={props.placeholder} placeholderTextColor={theme.inputPlaceholder}
            underlineColorAndroid='transparent' editable={!props.disabled}
            keyboardType={props.keyboardType || 'default'} autoCapitalize={capitalize}
            keyboardAppearance={props.keyboardAppearance}
            autoCorrect={autoCorrect} selection={state.position}
            secureTextEntry={this.state.guarded}
            value={this.state.value}
            onChangeText={this._onChangeText}
            onFocus={this._onFocus} onBlur={this._onBlur}
            autoFocus={props.autoFocus}
            multiline={props.multiline}
            maxLength={props.maxLength}
            onContentSizeChange={onContentSizeChange}
          />

• javascript
• function
• react-native
• mask
• textinput

• 1 Can you impl 4 textfields 2 for noneditable & other 2 for editable. And bind them in one view. – Tejas Commented Dec 17, 2019 at 7:43
• Thank you so much for the great idea! i will try! – jc28 Commented Dec 17, 2019 at 7:46

3 Answers 3

I have created a minimal example which exactly recreates your use case, without using any third party lib.

Code

changeText:

changeText(text){
// we do not allow the deletion of any character
if (text.length >= 11){
  var tmp = text.split("")
  // check if there are still is a X value in string 
  const currentIndex = text.indexOf('X');
  if (currentIndex) {
    //if a X was found, replace it with the newest character
    tmp[currentIndex] = tmp[11];
    //remove latest character again
    tmp.pop();
  }
  this.setState({value: tmp.join("")})
  }
}

render:

  <View style={styles.container}>
     <TextInput
      value={this.state.value}
      onChangeText={(text) => this.changeText(text)}
     />
  </View>

Working Demo

https://snack.expo.io/Sym-2W8RH

For pre-population, you can assign hardcoded masked value to the state this.state.value in your constructor.

And for masking I remend you using this library:

https://github./react-native-munity/react-native-text-input-mask

using this library masking work something like this

<TextInputMask
  refInput={ref => { this.input = ref }}
  onChangeText={(formatted, extracted) => {
  console.log(formatted) // +1 (123) 456-78-90
  console.log(extracted) // 1234567890
 }}
  mask={"+1 ([000]) [000] [00] [00]"}

/>

The best decision that i have found to use react-native-masked-text library:

import { TextInputMask } from 'react-native-masked-text';

            <TextInputMask
              type='custom' 
              options={{mask: accountMask}} 
              maxLength={20}
              customTextInput={InputText} 
              customTextInputProps={this._loginMaskProps}
              value={vm.checkingAccount} keyboardType={'number-pad'}
              placeholder={accountPlaceholder} 
              onChangeText={vm.changeCheckingAccount}
            />

You need just put property type to 'custom', and create a mask according https://github./benhurott/react-native-masked-text library, in my case it was like this:

 const accountMask = '40899810999999999999',