How to apply mask to Input

[Mate38]

Is there any way to apply mask to the of ?

[akhil-ga]

you can use secureTextEntry props in <Input> to mask the input

<Input secureTextEntry={true}/>

[Mate38]

For password field, yes, but im talking about phone number field, documents fields.

Something like data-mask in html input

Ex: <input type="text" name="tel" data-mask="(00) 0000-0000" data-mask-selectonfocus="true" />

[akhil-ga]

@Mate38 NativeBase <Input> is built on top of React Native <TextInput/>. You can mask the input in any similar way we mask the text in <TextInput/>

[Mate38]

It does not mask, as much as it applies the same mask that I use in other fields it does not show the mask

[akhil-ga]

@Mate38 can you paste a code snippet for us to test.

[Mate38]

I would like to do something like this, use the floatingLabel and at the same time have a content mask on the component

<Item floatingLabel>
    <Label>Tel</Label>
        <TextInputMask
            refInput={ref => { this.input = ref }}
            mask={"+1 ([000]) [000] [00] [00]"}
        />
</Item>

[lucasfls]

Mate38, have you find a solution ? I'm trying to do just like you, but when i put the floating label, my text input loses the mask. I'm using react-native-masked-text

[Mate38]

I built my own floating label and used the masked text behind it worked