sanniassin / react-input-mask

Input masking component for React. Made with attention to UX.
MIT License
2.22k stars 258 forks source link

React Native Support #326

Closed spearmootz closed 1 month ago

spearmootz commented 1 month ago

So this is not a bug, i will close this immediately.

just wanted to let people know that this works with react native, you may or may not do the ref depending on your library, i was not able to.

we are using react native paper + react-hook-form and was able to do it like this.

import { format } from '@react-input/mask';

<Controller
      name={name}
      control={control}
      defaultValue={defaultValue}
      rules={rules}
      render={({ field: { onChange, onBlur, value } }) => (
        <PaperTextInput
          {...{
            ...props,
            value: value,
            onChangeText: maskOptions
              ? (value) => {
                  onChange(format(value, maskOptions));
                }
              : onChange,
            onBlur: onBlur,
          }}
        />
      )}
    />

i hope this helps someone, this was way easier than i thought and worked very well