beforeMaskApply about react-native-masked-text HOT 8 OPEN

You can prevent this by wrapping the masked text input with a custom component.
Pass a "type" prop to the wrapper component, then at the shouldComponentUpdate lifecycle function return false if the "type" prop equals "masked".

from react-native-masked-text.

@agarcia17

class FormField extends React.Component { // wrapper component
    maskedInputRef = null
    
    static get TYPE() {
        return {
            DATE: 'date',
            MASKED: 'masked'
        }
    }

    shouldComponentUpdate() {
        return this.props.type !== FormField.TYPE.MASKED // return false if type prop equals masked
    }

    render() {
        switch (this.props.type) {
            case FormField.TYPE.MASKED:
                return <TextInputMask onBlur={this.props.onChange} /> // render TextInputMask here
        }
    }
}

from react-native-masked-text.

@agarcia17

class FormField extends React.Component { // wrapper component
    maskedInputRef = null
    
    static get TYPE() {
        return {
            DATE: 'date',
            MASKED: 'masked'
        }
    }

    shouldComponentUpdate() {
        return this.props.type !== FormField.TYPE.MASKED // return false if type prop equals masked
    }

    render() {
        switch (this.props.type) {
            case FormField.TYPE.MASKED:
                return <TextInputMask onBlur={this.props.onChange} /> // render TextInputMask here
        }
    }
}

Tested and still getting the ugly effect, @viniciusfonseca do you have any reproducible code without the flicker? 🙏

Thanks

from react-native-masked-text.

Same for me!

from react-native-masked-text.

Hi =)

Sorry, unfortunately, this is a bug of a text-input component of the react-native.

It don't block the controlled input before the state is applied.

I will open an issue to react-native's repository and keep this issue opened for feature fix.

Thanks for report.

from react-native-masked-text.

Thanks for help! =)

from react-native-masked-text.

@viniciusfonseca, do you mind elaborating more on the workaround you mentioned? I can't seem to get it working correctly

from react-native-masked-text.

@viniciusfonseca will try that out! thanks a bunch!

from react-native-masked-text.