Text input

Text inputs are used to capture textual information as well as numbers and passwords.

bpk-component-text-input

Backpack React Native text input component.

Text inputs

Day Night
bpk-component-text-input text-inputs iPhone 8 simulator bpk-component-text-input text-inputs iPhone 8 simulator - dark mode
bpk-component-text-input text-inputs Google Pixel emulator bpk-component-text-input text-inputs Google Pixel emulator - dark mode

Text inputs with accessory view

Day Night
bpk-component-text-input text-inputs-with-accessory-view iPhone 8 simulator bpk-component-text-input text-inputs-with-accessory-view iPhone 8 simulator - dark mode
bpk-component-text-input text-inputs-with-accessory-view Google Pixel emulator bpk-component-text-input text-inputs-with-accessory-view Google Pixel emulator - dark mode

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