react-native-bpk-component-text-input
Backpack React Native text input component.
Installation
npm install react-native-bpk-component-text-input --save-dev
Usage
;;;; const styles = StyleSheet; { return <View style=stylescontainer> <BpkTextInput label="Airport" style=stylesinput value="" placeholder="3 letter airport code" /> <BpkTextInput label="City" style=stylesinput value="Edinburgh" description="Enter your destination." /> <BpkTextInput label="City information" style=stylesinput value="Edinburgh is the capital of Scotland. Come for the castle, stay for the penguin parade at the zoo." multiline /> <BpkTextInput label="City" style=stylesinput value="Edinburgh" valid /> <BpkTextInput label="City" style=stylesinput value="Edinbrvgh" valid=false validationMessage="Edinbvrgh is not a valid city." /> <BpkTextInput label="City" style=stylesinput editable=false value="Edinburgh" /> <BpkTextInput label="Password" style=stylesinput secureTextEntry value="password" /> <BpkTextInput label="Phone number" style=stylesinput keyboardType="phone-pad" value="+441234567890" /> <BpkTextInput label="Date" mask="99/99" maxLength=5 style=stylesinput /> <BpkTextInput label="Card number" mask="9999-9999-9999-9999" maxLength=19 style=stylesinput /> </View> ; }
Props
Property | PropType | Required | Default Value |
---|---|---|---|
label | string | true | - |
value | string | true | - |
clearButtonMode (iOS only) | oneOf('never', 'while-editing', 'unless-editing', 'always') | false | while-editing |
description | string | false | null |
editable | bool | false | true |
mask | string | false | null |
inputRef | func | false | null |
valid | oneOf(true, false, null) | false | null |
validationMessage | string | false | null |
style | style | false | null |
accessoryView | node | false | null |
Mask
More details about how to use and define a mask can be found here: https://github.com/benhurott/tinymask
Theme Props
Required
textInputFocusedColor
Optional
textFontFamily