A <FloatingLabel>
component for react-native projects was initially cloned from react-native-floating-labels
And been actively maintaining it as we wanted to avoid any future changes to original repo that effects our existing applications.
react-native-floating-labels
Add it to your project
- Run
npm install react-native-floating-labels-smartlife --save
var FloatingLabel = require('react-native-floating-labels-smartlife');
Usage
'use strict'; var React = ; var FloatingLabel = ; var AppRegistry StyleSheet View = React; Component { superprops context; thisstate = dirty: false ; } { console; } { return <View style=stylescontainer> <FloatingLabel labelStyle=styleslabelInput inputStyle=stylesinput style=stylesformInput value='john@email.com' onBlur=thisonBlur >Email</FloatingLabel> <FloatingLabel labelStyle=styleslabelInput inputStyle=stylesinput style=stylesformInput >First Name</FloatingLabel> <FloatingLabel labelStyle=styleslabelInput inputStyle=stylesinput style=stylesformInput >Last Name</FloatingLabel> </View> ; }; var styles = StyleSheet; AppRegistry;
Additional Props:
FloatingLabel is just like any TextInput. It supports the below mentioned events handlers:
Following properties of TextInput are supported:
- autoCapitalize
- autoCorrect
- autoFocus
- bufferDelay
- clearButtonMode
- clearTextOnFocus
- controlled
- editable
- enablesReturnKeyAutomatically
- keyboardType
- multiline
- password
- returnKeyType
- selectTextOnFocus
- selectionState
- style
- testID
- value
Following events are supported:
- onBlur
- onChange
- onChangeText
- onEndEditing
- onFocus
- onSubmitEditing
MIT Licensed