react-native-bpk-component-text-input

> Backpack React Native text input component.

Installation

``sh
npm install react-native-bpk-component-text-input --save-dev
`

Usage

`js
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import BpkTextInput from 'react-native-bpk-component-text-input';
import { spacingBase } from 'bpk-tokens/tokens/base.react.native';

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: spacingBase,
},
input: {
marginBottom: spacingBase,
}
});

export default class App extends Component {
render() {
return (

label="Airport"
style={styles.input}
value=""
placeholder="3 letter airport code"
/>
label="City"
style={styles.input}
value="Edinburgh"
description="Enter your destination."
/>
label="City information"
style={styles.input}
value="Edinburgh is the capital of Scotland. Come for the castle, stay for the penguin parade at the zoo."
multiline
/>
label="City"
style={styles.input}
value="Edinburgh"
valid
/>
label="City"
style={styles.input}
value="Edinbrvgh"
valid={false}
validationMessage="Edinbvrgh is not a valid city."
/>
label="City"
style={styles.input}
editable={false}
value="Edinburgh"
/>
label="Password"
style={styles.input}
secureTextEntry
value="password"
/>
label="Phone number"
style={styles.input}
keyboardType="phone-pad"
value="+441234567890"
/>
label="Date"
mask="99/99"
maxLength={5}
style={styles.input}
/>
label="Card number"
mask="9999-9999-9999-9999"
maxLength={19}
style={styles.input}
/>

);
}
}
`

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

$3

* textInputFocusedColor

$3

* textFontFamily`