npm

Need private packages and team management tools?Check out npm Orgs. »

react-native-bpk-component-text-input

4.0.6 • Public • Published

react-native-bpk-component-text-input

Backpack React Native text input component.

Installation

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

Usage

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 (
      <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

  • textFontFamily
  • textInputFocusedColor

Keywords

none

install

npm i react-native-bpk-component-text-input

Downloadsweekly downloads

449

version

4.0.6

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability