About

This is a React-Native TextInput component, containing a floating placeholder, visible even after filled in, that you can freely modify its styles 💅🎉

Instalation

To install just input the following command:

npm i react-native-floating-label-input

or

yarn add react-native-floating-label-input

⚠ Important

• If you are using version 1.3.5 or higher, follow instructions below.
• If not, just install:

npm i react-native-reanimated@1.13.2

or

yarn add react-native-reanimated@1.13.2

Version 1.3.5 or higher - react-native-reanimated v2

• All animations now are using react-native-reanimated v2, as it was officially released recently. Please follow the Software Mansion guide installation for the react-native-reanimated v2: https://docs.swmansion.com/react-native-reanimated/docs/installation

• OBS.: if during Software Mansion installation guide your project won't build or builds but crashes on start, try removing node_modules folder.

• OBS. 2: if you don't want to use the new react-native-reanimated v2, do not upgrade to this version, install version 1.3.4 and react-native-reanimated@1.13.2

Version 1.3.4 or lower - react-native-reanimated v1

• Last stable version of this lib with Software-Mansion react-native-reanimated v1.

Just install by running:

npm i react-native-reanimated@1.13.2

or

yarn add react-native-reanimated@1.13.2

Props

'phone'

'date'

'card' | undefined | Set the mask type | | staticLabel | boolean | false | Set this to true if you want the label to be always at a set position. Commonly used with hint for displaying both label and hint for your input. For changing the position of the label with this prop as true, use the customLabelStyles topFocused and leftFocused to adjust the wanted position. | | hint | string | undefined | Hint displayed when label is focused or staticLabel prop is being used | | hintTextColor | string | '#ccc' | Set hint text color | | currency | string | undefined | Set currency on input | | currencyDivider | ','

'.' | ',' | Set currency thousands divider | | maxDecimalPlaces | number | 2 | Set maximum decimal places | | isFocused | boolean | undefined | If you override the onFocus/onBlur props, you must handle this prop as an state variable | | customLabelStyles | Object | leftFocused?: number

leftBlurred?: number

topFocused?: number

topBlurred?: number

fontSizeFocused?: number

fontSizeBlurred?: number

colorFocused?: string

colorBlurred?: string | Custom styles for the floating label | | customShowPasswordImage | image source path | undefined | Set the image source to set your custom show image | | customHidePasswordImage | image source path | undefined | Set the image source to set your custom hide image | | labelStyles | TextStyle | undefined | Set styles to the floating label component | | showPasswordImageStyles | ImageStyle | undefined | Set styles to the default show password component | | showPasswordContainerStyles | ViewStyle | undefined | Set styles to the default show password container component | | containerStyles | ViewStyle | undefined | Set styles to the input container component | | inputStyles | TextStyle | undefined