beforeMaskApply

[diegorodriguesvieira]

Hello, how to avoid this behavior?

[bhrott]

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.

[diegorodriguesvieira]

Thanks for help! =)

[viniciusfonseca]

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".

[agarcia17]

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

[viniciusfonseca]

@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
        }
    }
}

[agarcia17]

@viniciusfonseca will try that out! thanks a bunch!

[frangeris]

@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

[Benzer1406]

Same for me!