 |
 |
 |
 |
import React, { useState } from 'react';
import { ZipcodeField } from '@pbsc/react-native-ui-components';
// ...
const [postalCode, setPostalCode] = useState('');
const handlePostalcodeSubmit = (value) => {
setPostalCode(value);
console.log(`PostalCode: ${value}`);
};
// ...
<ZipcodeField
label="Postal Code"
country="ca"
onSubmitEditing={handlePostalcodeSubmit}
helperText="Please input your postal code."
hasHelperTextIcon={true}
helperTextCustomIcon={
<Image
source={require('../images/info.png')}
style={{ width: 12, height: 12 }}
/>
}
/>Type: string
The text to use for the floating label.
Type: string
The value to show for the ZipcodeField.
Type: string
Placeholder for the TextField.
Type: string
Default value: 'CA'
The country code for the zip code field. Changes maximum length of input text. Value needs to follow ISO 3166-1 alpha-2.
Type: boolean
Default value: false
When it is true, the ZipcodeField shows up with error style. (The color of the TextField and its helper text turns to error color)
Type: hexColorCode (ex: #ff00ff)
Default value: #b00020
Color for error state
Type: string
Text for additional info. Can be used to show error message with hasError prop.
Type: Function
Callback that is called when the ZipcodeField's text changes. Changed text is passed as an argument to the callback handler.
Type: Function
Callback that is called when the ZipcodeField's submit button (enter button on the keyboard) is pressed.
Type: Function
Callback that is called when the ZipcodeField is blurred.
Type: Function
Callback that is called when the ZipcodeField is focused.
Type: boolean
Default value: false
If true, user won't be able to interact with the component.
Type: boolean
Default value: true
If false, text is not editable.
Type: string/number
Default value: '80%'
Set the width of the TextField
Type: string/number
Default value: 48
Set the height of the TextField
Type: hexColorCode (ex: #ff00ff)
Default value: #9a9a9a
Outline color when it is active (focused)
Type: hexColorCode (ex: #ff00ff)
Default value: #9a9a9a
Outline color when it is inactive (blurred)
Type: hexColorCode (ex: #ff00ff)
Default value: #ffffff
Background color
Type: hexColorCode (ex: #ff00ff)
Default value: #000000
Text color
Type: object
Set style of the container part
Type: object
Set style of text input part
Type: object
Set style of helper text part
Type: boolean
Enable custom component (ex: helperTextCustomIcon) to place before helperText
Type: jsx component
A custom component (usually svg component or Image) to place icon before helperText and can be used for errors as well.