akinncar / react-native-mask-text

🎭 A React Native and Expo library to mask text and inputs
MIT License
417 stars 40 forks source link

I can't erase the typed value, I don't have access to the value field which is common in inputText. #54

Open marciojs186 opened 2 years ago

marciojs186 commented 2 years ago

How do I delete the input text value, I can't at all.

vxxvvxxv commented 2 years ago

+1

dleonven commented 2 years ago

+1 Same here, I pass an initial value to the input and its not showing it. The "value" prop doesn't work.

yarapolana commented 2 years ago

@marciojs186 @vxxvvxxv @dleonven Hope this helps. Use the ref to clear the initial value.

  const [value, setValue] = useState('')
  const inputRef = createRef<TextInput>()

  useEffect(() => {
    // this is a fix for when masked input would force value 0 instead of placeholder
    if (value === '0') {
      inputRef.current?.clear()
    }
  }, [inputRef, value])

  return (
    ...
      <MaskedInput 
        ref={inputRef}
        type="currency" // it only works if type is currency
        placeholder={'initial value'}
        onChangeText={(text, rawText) => {
          setValue(rawText)
        }}
        value={value}
      />
    ...
  )