react-native-mask-textinput

You can integrate this component in your code very easily. Just install by

yarn add react-native-mask-textinput

OR

npm install react-native-mask-textinput

Example:

.
.
import MaskField from "react-native-mask-textinput";
.
.

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

  onTextChange = (value) => {
    this.setState({ text: value });
  };

  render() {
    return (
      <View style={styles.container}>
        <MaskField
          mask="[000][0000000]" // no spaces between square brackets
          keyboardType="numeric"
          value={this.state.text}
          onChangeText={this.onTextChange}
          delimiter=" "
        // countryCode="+9"
        //  countryCodeContainerStyle={{backgroundColor: "grey"}}
        //  countryCodeTextStyle={{color: "red"}}
        />
      </View>
    );
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Simple

With Country Code

| Props | Description | | ------------ | ------------ | | value | Set value of input field | | onChangeText | Takes a function to be called every time the text changed | | Mask | "[00][00]" this will give "12 34". Dont give space in square brackets. Curly brackets are accepted in square brackets like "[(000)][00]" which will give "(123) 45". | | Delimiter | Default delimiter is " " space. You can use delimiter like "-" | | countryCode | You can also put a constant before input field. This is optional | | countryCodeContainerStyle | Styling country code container. Optional field | | countryCodeTextStyle | Styling country code Text. Optional field |