react-native-ui-lib
Version:
[](https://stand-with-ukraine.pp.ua)
60 lines (59 loc) • 1.97 kB
JSON
{
"name": "MaskedInput",
"category": "form",
"description": "Mask Input to create custom looking inputs with custom formats",
"extends": ["TextInput"],
"extendsLink": ["https://reactnative.dev/docs/textinput"],
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx",
"images": [
"https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966"
],
"props": [
{
"name": "renderMaskedText",
"type": "React.ReactElement",
"required": true,
"description": "callback for rendering the custom input out of the value returns from the actual input"
},
{
"name": "containerStyle",
"type": "ViewStyle",
"description": "container style for the masked input container"
}
],
"snippet": [
"function Example(props) {",
" const [value, setValue] = useState('15$1');",
"",
" 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$2}",
" initialValue={value}",
" // onChangeText={setValue}",
" />",
" </div>",
" );",
"}"
]
}