CODEWITHSUNDEEP
react-native
serene
serene

Reputation: 1646

How to input phone number in this 'xxx-xxx-xxxx' format in react native?

I want that when I enter numbers in TextInput field it will take as

123-456-7890 this format, without installing any library.

Upvotes: 2

Views: 3440

Answers (1)

hong developer
hong developer

Reputation: 13906

You can convert data using regular expressions.

Example

import React, { Component } from 'react';
import { TextInput,View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { num: '' };
  }

  changeNum(num) {
    formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
    this.setState({
      num: formatNum
    });
  }

  render() {
    return (
      <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1, width:"80%"}}
        onChangeText={(num) => this.changeNum(num)}
        value={this.state.num}
        maxLength={12} 
        keyboardType={'numeric'}
      />
      </View>
    );
  }
}

Upvotes: 2

Related Questions