Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mayank-patel/react-native-floating-labels
React Native Floating Labels Library
https://github.com/mayank-patel/react-native-floating-labels
Last synced: 3 months ago
JSON representation
React Native Floating Labels Library
- Host: GitHub
- URL: https://github.com/mayank-patel/react-native-floating-labels
- Owner: mayank-patel
- License: mit
- Created: 2015-05-05T22:24:53.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2021-04-04T21:52:03.000Z (almost 4 years ago)
- Last Synced: 2024-12-01T10:13:35.002Z (3 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-floating-labels
- Size: 2.79 MB
- Stars: 163
- Watchers: 8
- Forks: 74
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
- awesome-react-native - react-native-floating-labels ★126 - Reusabe floating lable component for react native (Components / UI)
- awesome-reactnative-ui - react-native-floating-labels - patel/react-native-floating-labels/master/demo.gif)| (Others)
- awesome-react-native - react-native-floating-labels ★126 - Reusabe floating lable component for react native (Components / UI)
- awesome-reactnative-ui - react-native-floating-labels - patel/react-native-floating-labels/master/demo.gif)| (Others)
- awesome-react-native - react-native-floating-labels ★126 - Reusabe floating lable component for react native (Components / UI)
- awesome-react-native - react-native-floating-labels ★126 - Reusabe floating lable component for react native (Components / UI)
- awesome-react-native-ui - react-native-floating-labels ★82 - Reusabe floating lable component for react native (Components / UI)
README
## react-native-floating-labels [](https://travis-ci.org/mayank-patel/react-native-floating-labels) [](https://badge.fury.io/js/react-native-floating-labels) [](https://raw.githubusercontent.com/hyperium/hyper/master/LICENSE) [](https://codeclimate.com/github/mayank-patel/react-native-floating-labels)
A `` component for react-native. This is still very much a work
in progress and only handles the simplest of cases, ideas and
contributions are very welcome.
## Add it to your project
1. Run `npm install react-native-floating-labels --save`
2. `var FloatingLabel = require('react-native-floating-labels');`
## Usage
```javascript
'use strict';
var React = require('react-native');
var FloatingLabel = require('react-native-floating-labels');
var {
AppRegistry,
StyleSheet,
View,
} = React;
class form extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
dirty: false,
};
}
onBlur() {
console.log('#####: onBlur');
}
render() {
return (
Email
First Name
Last Name
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 65,
backgroundColor: 'white',
},
labelInput: {
color: '#673AB7',
},
formInput: {
borderBottomWidth: 1.5,
marginLeft: 20,
borderColor: '#333',
},
input: {
borderWidth: 0
}
});
AppRegistry.registerComponent('form', () => form);
```
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**