bpk-component-text-input

bpk-component-text-input

Backpack React Native text input component.

Text inputs

Day	Night

Text inputs with accessory view

Day	Night

Installation

Check the main Readme for a complete installation guide.

Usage

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import BpkTextInput from 'backpack-react-native/bpk-component-text-input';
import { spacingBase } from '@skyscanner/bpk-foundations-react-native/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 (
      <View style={styles.container}>
        <BpkTextInput
          label="Airport"
          style={styles.input}
          value=""
          placeholder="3 letter airport code"
        />
        <BpkTextInput
          label="City"
          style={styles.input}
          value="Edinburgh"
          description="Enter your destination."
        />
        <BpkTextInput
          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
        />
        <BpkTextInput
          label="City"
          style={styles.input}
          value="Edinburgh"
          valid
        />
        <BpkTextInput
          label="City"
          style={styles.input}
          value="Edinbrvgh"
          valid={false}
          validationMessage="Edinbvrgh is not a valid city."
        />
        <BpkTextInput
          label="City"
          style={styles.input}
          editable={false}
          value="Edinburgh"
        />
        <BpkTextInput
          label="Password"
          style={styles.input}
          secureTextEntry
          value="password"
        />
        <BpkTextInput
          label="Phone number"
          style={styles.input}
          keyboardType="phone-pad"
          value="+441234567890"
        />
        <BpkTextInput
          label="Date"
          mask="99/99"
          maxLength={5}
          style={styles.input}
        />
        <BpkTextInput
          label="Card number"
          mask="9999-9999-9999-9999"
          maxLength={19}
          style={styles.input}
        />
      </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