Getting Error on TextInput with TextInputMask in react-native-paper

Question

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: TextInputMask

<TextInput
    mode="outlined"
    label="Pincode"
    value={this.state.pincode}
    onChangeText={this.handlePincodeChange}
    left={<TextInput.Icon style={{marginEnd:10}} color='#156da9' name="map-marker"/>}
    style={styles.textInput}
    keyboardType='number-pad'
    render={props => 
        <TextInputMask
            {...props}
            mask="[000000]"
        />
    }
    theme={theme}
/>

Answer 1

This seems to be a BUG in react-native-text-input-mask library and the code is fixed but pull request is not merged yet so most likely you will not be able to fix this until library has fix itself unless you want to fork the library with fix and build it.

PR #141

BUG 158