React Native Floating Label TextField
A simple wrapper around 'TextInput'. Works both for iOS and Android. Note the wrapped TextField has no placeholder - the placeholder is 'simulated' by the floating label being down where the placeholder would normally be. I might later add a version which actually uses placeholder but for now, trying to use the placeholder causes issues with appearance.**
install
npm i --save rn-flabel-textfield
Props:
Accepts all TextField props plus the following:
| Property | Type | Default | Description |
|---|---|---|---|
| duration | number |
250 | Animation duration |
| inactiveColor | string |
'dimgrey' | Color of floating label when the TextInput has no focus or when the floating label is down |
| placeholderFontSize | number |
15 | Font size of placeholder |
| flabelFontSize | number |
12 | Font size of floating label |
| activeColor | string |
'#414Db1' | Color of focused floating label |
| flabelPadding | number |
20 | Top padding of the floating label when it is down |
| flabelActivePadding | number |
0 | Top padding of the floating label when it is up |
| wrapperStyle | object |
{} | Style for the View that wraps the floating label and the TextInput |
example usage:
import FloatLabelTextField from 'rn-flabel-textfield'
...
<FloatLabelTextField
placeholder={'Project Name'}
onChangeText={newProject.setProjectName}
value={newProject.name}
style={{height: 60}}
wrapperStyle={{marginTop: 15}}
/>
Checkbox, TextInput and Floating label textinput
License: MIT
** small flicker when using Animated, which isn't there with LayoutAnimation which in turn causes blurry placeholder issues on iOS.