MaskedInput

Mask Input to create custom looking inputs with custom formats
(code example)

info

This component extends TextInput props.

Usage

Live Editor

function Example(props) {
  const [value, setValue] = useState('15');

  const renderTimeText = useCallback((value) => {
    const paddedValue = _.padStart(value, 4, '0');
    const hours = paddedValue.substr(0, 2);
    const minutes = paddedValue.substr(2, 2);

    return (
      <Text text20 grey20 center>
        {hours}
        <Text red10>h</Text>
        {minutes}
        <Text red10>m</Text>
      </Text>
    );
  }, []);

  const formatter = useCallback(value => value?.replace(/\D/g, ''), []);
  return (
    <div>
      <MaskedInput
        migrate
        renderMaskedText={renderTimeText}
        formatter={formatter}
        keyboardType={'numeric'}
        maxLength={4}
        initialValue={value}
        // onChangeText={setValue}
      />
    </div>
  );
}

Result

Loading...

API

containerStyle

container style for the masked input container ViewStyle

renderMaskedText

callback for rendering the custom input out of the value returns from the actual input React.ReactElement