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

An alternative to TextInput by Vertical Strategy

Usage no npm install needed!

<script type="module">
  import verticalstrategyReactNativeFloatingLabelTextInput from 'https://cdn.skypack.dev/@verticalstrategy/react-native-floating-label-text-input';
</script>

README

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