rn-floating-label-input

rn-floating-label-input

A <FloatingLabelInput> 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 rn-floating-label-input --save
2. import FloatingLabelInput from 'rn-floating-label-input';

Usage

'use strict';
 
var React = require('react-native');
 
import FloatingLabelInput from 'rn-floating-label-input';
 
import { AppRegistry, StyleSheet, View, } from 'react-native';
 
class form extends React.Component {
 
  constructor(props, context) {
    super(props, context);
 
    this.state = {
      dirty: false,
    };
  }
 
  onBlur() {
    console.log('#####: onBlur');
  }
 
  render() {
    return (
      <View style={styles.container}>
        <FloatingLabelInput 
          labelStyle={styles.labelInput}
          inputStyle={styles.input}
          style={styles.formInput}
          value='[e-mail]'
          onBlur={this.onBlur}
        >
          Email
        </FloatingLabelInput>
        <FloatingLabelInput 
          labelStyle={styles.labelInput}
          inputStyle={styles.input}
          style={styles.formInput}
        >
          First Name
        </FloatingLabelInput>
        <FloatingLabelInput
          labelStyle={styles.labelInput}
          inputStyle={styles.input}
          style={styles.formInput}
        >
          Last Name
        </FloatingLabelInput>
      </View>
    );
  }
};
 
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:

FloatingLabelInput 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