React Native Floating Label Text Input

Used as an alternative to TextInput by us in Vertical Strategy, we thought you might love it too.

Installation

yarn add @verticalstrategy/react-native-floating-label-text-input

Usage

import FloatingLabelTextInput from 'react-native-floating-label-text-input'

<FloatingLabelTextInput
  containerStyle={{ width: '100%', height: 45 }}
  onChangeText={this.onChangeText}
  placeholder={`Name`}
  value={this.state.name}
/>

Props

Besides TextInput Props, the following props can be passes to the component.

| Param | Type | Description | | ----------------------- | -------- | --------------------------------------------------------------------------------- | | containerStyle | any | Styles for the container wrapping the internal TextInput and label. | | label | string | If provided, this will be displayed in the label instead of the placeholder text. | | labelStyle | any | Styles for the label. | | underlineColorAndroid | string | Passed as underlineColorAndroid to TextInput | | innerRef | func | Passed as ref to TextInput |