Hello, I'm faced with issue while trying to get value of text input. onChange and onChangeText triggered only after losing focus which doesn't acceptable for me.

How I can get value of input?

this.state = {
       loginFormatted: '9111111111',
       login: '9111111111',
     };
  
   ......

   <TextInputMask
                    onChangeText={(formatted, extracted) => {
                      this.setState({login: extracted, loginFormatted: formatted});
                    }}
                    mask={"[000] [000] [00] [00]"}
                    value={this.state.loginFormatted}
                    keyboardType="numeric"
                  />
   

Here is my code.
When i start typing, the input value changes, then changes back to previous for a moment and then becomes right.

For example:

-- value was: 123 45
-- I type '6'
-- value becomes 123 456
-- value becomes 123 45
-- value becomes 123 456

Probably state doesn't change fast enough.
This ui changes are very noticeable for user.

Is there any workaround for it?

Something similar to #11 seems to be still occurring, even with only setting a defaultValue and leaving the value uncontrolled.

Backspacing behavior jumps back several characters at a time.

Using:
react 16.0.0
react-native 0.52.0
react-native-text-input-mask 0.5.2
emulator android 6.0 API 23

<TextInputMask
  defaultValue={ this.props.value }
  onChangeText={ this.handleChange }
  mask='[0000] - [0000] - [0000] - [0000]' />

...

handleChange = (formattedValue, extractedValue) => {
  // Im not actually modifying the field's state here
}

When i use Cocoapods and try to build project with XCode I always get the same error.

Steps to reproduce:

1. Create new project with react-native init Test
2. Add package with yarn: yarn add react-native-text-input-mask
3. Link library
4. Compile project - it's ok, compiles well!
5. Add Cocoapods into ios folder
6. Open .xcworkspace
7. Try compile again.

I think that there is something wrong with header search path, but don't even know how to fix it

I get this error

Cannot read property 'mask' of undefined

when I add this line

import TextInputMask from 'react-native-text-input-mask';

any solution?

In my project the mask does not work;

"dependencies": { "apisauce": "^0.14.3", "native-base": "^2.4.2", "react": "16.3.1", "react-native": "0.55.3", "react-native-text-input-mask": "^0.7.0", "react-native-vector-icons": "^4.6.0" }

Do I need to do something to make it work? I'm testing on android

import TextInputMask from 'react-native-text-input-mask';
<TextInputMask mask={'[000].[000].[000]-[00]'}/>

Hi there,

Is it possible to use this as a higher order component?

I am using this <TextField> component - https://github.com/n4kz/react-native-material-textfield

And need to mask them. Is it possible to field component, with your masker?

mask shown only if i already enter first symbol.
but it neccesery to display mask when field focused

for example, i need enter phone number

<TextInputMask placeholder="Your phone" onChangeText={(formatted, extracted) => this.handleMaskedField(formatted, extracted)} mask={"+7 ([000]) [000] [00] [00]"} keyboardType="numeric" />

in some countries writtings +7 and 8 are equalent, and some users enter first symbol 8,
then they see the mask erase this number, and start to enter again.

that`s not ux-friendly,

Please add property, which gives a control to show mask on focus or not

Hello,

Error for build:

RCTUITextField.h file not found

Version:
react-native - 0.44.2

Hitting that when building my app

Hi,

I'm trying use the onBlur in ios, but the function is not called.

my code:

<TextInputMask
  placeholder="Test"
  onBlur={() => console.log('onBlur works??')} // <- this not works
  onChange={() => console.log('onChange works!!')}
  onChangeText={() => console.log('onChangeText works!!')}
  mask={"+1 ([000]) [000] [00] [00]"} // <- if comment this line, the onBlur works
/>

In Android works everything :-)

Tested in:
TextInputMask: 0.4.0
React-Native: 0.48.1
xcode: 8.2.1
simulator iphone 6 (not tested in real device)

I need to change mask depending on country code
So if i have +44 the mask will be [99] [99] [9999] [9999]
And if i had +47 - [99] [99] [999] [999]
But when i trying to do that it doesn't work

  switch(countryCode) {
    case('44'):
      return this.setState({mask: '[99] [99] [9999] [9999]'})
    case('47'):
       return this.setState({mask: '[99] [99] [999] [999]'})
}

Got the following problem when the parent container umount. The error is occurring at index.js line 26.

null is not an object (evaluating '_this2.input.setNativeProps')

RN 0.48.4
RN-text-input-mask 0.5.2
Android

My code:

const mask = '([00]) [00009] [0000]'
...
<TextInputMask
        refInput={ref => { this.textInput = ref }}
        style={Styles.input}
        autoCapitalize={autoCapitalize}
        autoCorrect={autoCorrect}
        value={value}
        autoFocus={autoFocus}
        secureTextEntry={secureTextEntry}
        editable={editable}
        underlineColorAndroid='transparent'
        keyboardType={keyboardType}
        mask={mask}
        onChangeText={onChangeText}
        returnKeyType={returnKeyType}
        onSubmitEditing={onSubmitEditing}
        onBlur={this.handleTextInputBlur}
        onFocus={this.handleTextInputFocus}
      />

I'm using the input mask that is connected with mobileNumber from component state.
some time i need to clear the mobileNumber so i'm using the blow code. number is cleared and sate is updated but the mask first view ( stay in the input field i need to clear this when mobileNumber has empty string. See Here:https://ibb.co/ehWMod

const clearNum()=>{
this.setState({
mobileNumber:''
})
}

<TextInputMask
                refInput={(ref) => this.myDateText = ref}
                mask={"([000]) [000]-[0000]"}
                placeholder="Mobile Phone"
                placeholderTextColor={lightGrayColor}
                underlineColorAndroid="transparent"
                keyboardType="numeric"
                style={homeStyles.PhoneInputText}
                maxLength={15}
                onChangeText={text => this.onTextChange(text)}
                value={mobileNumber}
              />

I want to be in react native
Add numbers 1 to 3
And in the total, I will show the sum of the numbers
Possibility to be empty of some fields .For example, just number 1 and number 3
How can i implement it
It's like a calculator that just collects

http://uupload.ir/files/fae3_10.jpg

import React, {Component} from 'react';
import {View} from 'react-native';
import {Input, Item, Form, Label, Button, Text} from 'native-base';

export default class calculatorAdvanced extends Component {

    constructor(props) {
        super(props);

        this.state = {
            num1: 0,
            num2: 0,
            num3: 0,
            total:0,
        }
    }
    onDateChange(date) {
      this.setState({
        total: date,
      });
    }
    render() {
      const { total } = this.state;
      const startDate = total ? total.sum(num1 , num2 , num3) :'' ;
        return (
            <View>
                <Form>

                    <Item inlineLable>
                        <Label>number 1</Label>
                        <Input
                            value={this.state.num1}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 2</Label>
                        <Input
                            value={this.state.num2}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Item inlineLable>
                        <Label>number 3 </Label>
                        <Input
                            value={this.state.num3}
                            onChangeText={(text) => this.setState({num1: parseInt(text)})}/>
                    </Item>

                    <Button onPress={onDateChange()}>
                        <Text>Collect</Text>
                    </Button>

                    <Item inlineLable>
                        <Label>totals:{ startDate }</Label>
                        <Input/>
                    </Item>

                </Form>
            </View>
        )
    }

}

Is possible to add a reverse option, so i can use this mask package for money format?

when I set a style with color RED to the input, sometimes it's not work.

I have been trying to clear the text entered in the input field using various methods but none of them seem to be working.

Diving into the code I found that the code manipulates the value of text in native props every time the value changes. I also found out that a callback is passed to the native 'mask' function before manipulating the native text prop. But I couldn't further debug and find out the reason why the text is not cleared.

please provide a fix or a workaround for this issue. Thanks.

Here's the message while uploading to itunesconnect:

ERROR ITMS-90206: "Invalid Bundle. The bundle at 'myapp.app/Frameworks/InputMask.framework' contains disallowed file 'Frameworks'."

No error messages, no nothing. Just crashes and brings me back to home screen. I'm no React Native 0.50.

According to the installation README, after installing and linking android "just works", however it is not working for me. Working great on iOS simulator and on iOS device, but when running on both android simulator and android device I get the following error:

undefined is not an object (evaluation '_reactNative.NativeModules.RNTextInputMask.mask')

See error here:

I have confirmed that in the settings.gradle is the following:

include ':react-native-text-input-mask'
project(':react-native-text-input-mask').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-input-mask/android')

and in the app/build.gradle is the following:

compile project(':react-native-text-input-mask')

Any help would be greatly appreciated! Really loving this package on iOS, works great.

I'm trying to use the following code:

<TextInputMask mask={"[00]/[00]/[0000]"} placeholder="DD/MM/YYYY" keyboardType="numeric" defaultValue={this.state.startDate} returnKeyType="next" onSubmitEditing={event => this.refs.endDateInput.focus()} onChangeText={startDate => this.setState({startDate})} style={[Styles.inputTextMd, Styles.searchInputText]} />

<TextInputMask ref="endDateInput" mask={"[00]/[00]/[0000]"} placeholder="DD/MM/YYYY" keyboardType="numeric" defaultValue={this.state.endDate} returnKeyType="done" onSubmitEditing={event => this.refs.searchButton.press()} onChangeText={endDate => this.setState({endDate})} style={[Styles.inputTextMd, Styles.searchInputText]} />

It throws undefined is not a function (evaluating _this6.refs.endDateInput.focus()

dyld`__abort_with_payload:
    0x1047c2f14 <+0>:  mov    x16, #0x209
    0x1047c2f18 <+4>:  svc    #0x80
->  0x1047c2f1c <+8>:  b.lo   0x1047c2f34               ; <+32>
    0x1047c2f20 <+12>: stp    x29, x30, [sp, #-0x10]!
    0x1047c2f24 <+16>: mov    x29, sp
    0x1047c2f28 <+20>: bl     0x1047c25b0               ; cerror_nocancel
    0x1047c2f2c <+24>: mov    sp, x29
    0x1047c2f30 <+28>: ldp    x29, x30, [sp], #0x10
    0x1047c2f34 <+32>: ret  

dyld: Library not loaded: @rpath/InputMask.framework/InputMask
Referenced from: /var/containers/Bundle/Application/7852D8F9-46F3-4952-B0BF-5CD16AA12084/Test.app/Test
Reason: image not found
(lldb)

Create a clean app:

react-native init Test
cd Test
yarn add react-native-text-input-mask
react-native link react-native-text-input-mask
open ./ios/Test.xcodeproj

... add TextInputMask in App.js and run.

Hi,

I'm trying get value of the input without mask, but not works.

code:

<TextInputMask
  mask={"[000]-[000]"}
  onChangeText={(text) => console.log(text)}
/>

the console print "123-456" instead "123456".

how could i make this?

Tested in:
TextInputMask: 0.4.0
React-Native: 0.48.3
simulator Android 6

thanks :-)

So I have the following issue.
I initialize the component with some predefined value

<TextInputMask           
    mask={ mask }
    value={ this.props.value }
    onChangeText={ (formatted, extracted) => {
        //logic
    }}
/>

In the parent component I have this piece of state:

currentState = {value: 'somevalue'}
originalState = {value: 'originalvalue'}

I have a Cancel button in my app which when I press I pass down the originalState to this component and it should update the this.props.value with 'originalValue'. The prop is passed down, I logged it in the render method to check and the new 'originalValue' is there but the value of the Component does not change.

This happen only on iOS, on Android it works fine.

RN: 0.54
react-native-text-input-mask: latest

Hi i get this error on android google store.
I see this error on different versions android (from 5.1 to 7.1) and different phones.
"react-native": "0.55.0"
"react-native-text-input-mask": "^0.7.0"

java.lang.NullPointerException:
at com.RNTextInputMask.RNTextInputMaskModule.setMask (RNTextInputMaskModule.java:74)
at java.lang.reflect.Method.invoke (Native Method)
at java.lang.reflect.Method.invoke (Method.java:372)
at com.facebook.react.bridge.JavaMethodWrapper.invoke (JavaMethodWrapper.java:372)
at com.facebook.react.bridge.JavaModuleWrapper.invoke (JavaModuleWrapper.java:160)
at com.facebook.react.bridge.queue.NativeRunnable.run (Native Method)
at android.os.Handler.handleCallback (Handler.java:815)
at android.os.Handler.dispatchMessage (Handler.java:104)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage (MessageQueueThreadHandler.java:29)
at android.os.Looper.loop (Looper.java:194)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run (MessageQueueThreadImpl.java:192)
at java.lang.Thread.run (Thread.java:818)

Can I use TextInputMask but with undefined or some other value of property mask (any character)? It's comfortable to use this component with mask and without.

Any TextInputMask.value property changes does not have any affects to masked value. Android works fine.

On Android (I cannot test on iOS), when writting in the input, the caret is moving back to the input beginning (once the second character is written).
If I keep typing, characters at the end of the string are "pushed" by incoming ones, disapearing.
If I move my caret at the end of the string, I can type one character, then the caret is back to the beginning.

I'm testing with the example.

RN: 0.54.3
react-native-text-input-mask: 0.7.0

I want to make a small change to this source code and go to another page by choosing one day a week, but I'm having an error. What's wrong with that?

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import JalaliCalendarPicker from 'react-native-jalali-calendar-picker';
 
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedStartDate: null,
    };
    this.onDateChange = this.onDateChange.bind(this);
  }
 
  onDateChange(date) {
    this.setState({
      selectedStartDate: date,
      navigate('screen')
    });
  }
  render() {
    const { selectedStartDate } = this.state;
 
    const startDate = selectedStartDate ? selectedStartDate.format('jYYYY/jM/jD [is] YYYY/M/D') : '';
    
    const {navigate}=this.props.navigation;

    return (
      <View style={styles.container}>
        <JalaliCalendarPicker
          onDateChange={this.onDateChange}
        />
 
        <View>
          <Text>SELECTED DATE:{ startDate }</Text>
        </View>
      </View>
    );
  }
}

https://github.com/afshinm/JalaliCalendarPicker

Hey! Love the library - I was wondering how hard it would be to add a comma separator for the currency input. I understand that this would be more of a dynamic thing, but I'm curious where you would start on adding something like this?

Hi! Clear() method doesn't seem to work. I've already seen this https://github.com/facebook/react-native/issues/18272, however pure TextInput clear() method works without any problem.
Here's the code:
<TextInputMask style={{ flex: 1, fontSize: SCREEN.width > 320 ? scale(typography.fontSizes.l) : 16, color: colors.contrast, textDecorationLine: 'none', padding: 12, opacity: 1, }} refInput={ref => { this.input = ref }} onChangeText={this.onChangeText} keyboardType={'phone-pad'} selectionColor={colors.contrast} placeholder={'Phone number'} placeholderTextColor={colors.whiteGreen2} editable={this.state.editable} value={this.state.phone} returnKeyType='done' onSubmitEditing={this.onNextClick} mask={"[000] [000] [00] [00]"} />

and

clearTextInput = () => { this.setState({phone: ''}, () => { this.focus(); }); this.input.clear(); };

React-native 0.56.0
react-native-text-input-mask@^0.7.0
Platform: iOS (android is ok)

Hi there. Could I use this library without ejecting my app. If I eject that I lost advantages of development with Expo.
I use react-native not so long, so I can be wrong.
I'll be grateful for any help.
Thanks.

Setting a prop of testID will cause a hard crash on Android with java.lang.String cannot be cast to android.text.TextWatcher

RN 0.55
v0.7.0

Hello there.
I've done the steps in the docs, but no luck, my project on iOS won't build

#import "RCTSinglelineTextInputView.h"

in file RNTextInputMask.m (line 13)

Versions:
"react-native-text-input-mask": "^0.7.0",
"react-native": "0.52.x",
"react": "16.2.0",
Also using react-native-navigation if this matters

Olá, encontrei o seguinte erro:
error: package com.RNTextInputMask does not exist import com.RNTextInputMask.RNTextInputMaskPackage;

Para resolver, adicionei a seguinte linha de codigo ao gradle.app e depois recompilei o projeto.

compile project(':react-native-text-input-mask')

abraço

Library is not working on RN 0.54

/node_modules/react-native-text-input-mask/ios/RNTextInputMask/RNTextInputMask/RNTextInputMask.m:45:29: Incompatible pointer types initializing 'RCTUITextField *' with an expression of type 'UIView *'

I am going to make the TextInputMask component not to be editable and show a formatted phone number, +86 1234 56 7890, by providing a pure number, 1234567890, on it.
And I want to clear the phone number sometimes.
I tried to set a value property or call this.input.clear()
But all of them were fallen in to fail.
Is there any way to implement?
Thanks.

I refer to the tutorial and I know that I should run the react-native link command after installation. However, due to the different structure of our project directory, running react-native link does not make it work. So I want to know how to manually install this library to make it work?

Thanks!

I need degree mask and longitude mask, like +/-00°00′00.000000″ and 120°00′00.000000N/W.
now I can not input "-".

hope to your reply!

My project is not compiling when I upgrade to RN 0.53.0, here is the error:

'RCTTextField.h' file not found
#import "RCTTextField.h"
        ^~~~~~~~~~~~~~~~
1 error generated.

** BUILD FAILED **

Anyone having this?

MacBook-Air-jennyzhmenny:taxi jv$ react-native --version
react-native-cli: 2.0.1
react-native: 0.48.4

Console output:

/Users/jv/code/taxi/node_modules/react-native-text-input-mask/ios/RNTextInputMask/RNTextInputMask/RNTextInputMask.m:40:46: error: no visible @interface for 'RCTTextField' declares the selector 'textField'
RCTUITextField *textView = [view textField];
~~~~ ^~~~~~~~~
1 error generated.

** BUILD FAILED **

The following build commands failed:
CompileC /Users/jv/code/taxi/ios/build/Build/Intermediates.noindex/RNTextInputMask.build/Debug-iphonesimulator/RNTextInputMask.build/Objects-normal/x86_64/RNTextInputMask.o RNTextInputMask/RNTextInputMask.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Simple rollback to 0.47.2 did not make a trick(upraises problem with dependencies mismatch)

Hello everyone.

I'm trying to create a TextInputMask with the following mask

[AAA]-[0000]

(this is the pattern for vehicles license plate here in brazil)

But when i type the input field behaves like this:

Here is my code:

<TextInputMask
    keyboardType='default'
    refInput={ref => { this.TEXT_INPUT_REF = ref; }}
    returnKeyType='go'
    placeholder={Texts.Placeholders.LICENSE_PLATE} /* AAA-0000 */
    style={styles.inputField}
    onChangeText={text => this.props.writeVehicle(text)}
    value={this.props.vehicle}
    autoCapitalize='characters'
    mask={Texts.Masks.LICENSE_PLATE} /* [AAA]-[0000] */
/>

Having a problem with running jest tests. It failed with the TypeError
Cannot read property 'mask' of undefined
Are there any suggestions or workarounds how this could be solved?

Passing in a value on Android causes a noticeable flicker.
Reproduce by using state to update value onChange and pass into TextInputMask on each render.

Video of the issue: https://youtu.be/b0aTUZtd-t4

on android, maxLength prop count the mask space, for example, when set mask [000000] [00000000] [0000], and set maxLength 18, it work fine on iOS, I can input all of 18 valid characters, but on android, it is can only input 16 valid character, i must set maxLength to 20.

Hi,

i don't get it running on Android. I'm using these package versions:

"react": "16.4.1",
"react-native": "0.55.4",
"react-native-text-input-mask": "0.7.0",

I'm working with typescript and used CRNA with react-native-scripts-ts.
and this input field:

<TextInputMask
    mask={'[000],[00] m'}
    onChangeText={this.changeHeight}
    keyboardType="numeric" />

and i get this error on my smartphone screen:

undefined is not an object (evaluating '_reactNative.NativeModules.RNTextInputMask.mask')

this is the result of my link command:

$ react-native link react-native-text-input-mask
Scanning folders for symlinks in project-folder/node_modules (20ms)
$

Thanks for helping!