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

1. Run npm install react-native-floating-labels-smartlife --save
2. var FloatingLabel = require('react-native-floating-labels-smartlife');

Usage

1'use strict';
2
3var React = require('react-native');
4
5var FloatingLabel = require('react-native-floating-labels-smartlife');
6
7var {
8  AppRegistry,
9  StyleSheet,
10  View,
11} = React;
12
13class form extends React.Component {
14
15  constructor(props, context) {
16    super(props, context);
17
18    this.state = {
19      dirty: false,
20    };
21  }
22
23  onBlur() {
24    console.log('#####: onBlur');
25  }
26
27  render() {
28    return (
29      <View style={styles.container}>
30        <FloatingLabel 
31            labelStyle={styles.labelInput}
32            inputStyle={styles.input}
33            style={styles.formInput}
34            value='john@email.com'
35            onBlur={this.onBlur}
36          >Email</FloatingLabel>
37        <FloatingLabel 
38            labelStyle={styles.labelInput}
39            inputStyle={styles.input}
40
41            style={styles.formInput}
42          >First Name</FloatingLabel>
43        <FloatingLabel
44            labelStyle={styles.labelInput}
45            inputStyle={styles.input}
46            style={styles.formInput}
47          >Last Name</FloatingLabel>
48      </View>
49    );
50  }
51};
52
53var styles = StyleSheet.create({
54  container: {
55    flex: 1,
56    paddingTop: 65,
57    backgroundColor: 'white',
58  },
59  labelInput: {
60    color: '#673AB7',
61  },
62  formInput: {    
63    borderBottomWidth: 1.5, 
64    marginLeft: 20,
65    borderColor: '#333',       
66  },
67  input: {
68    borderWidth: 0
69  }
70});
71
72AppRegistry.registerComponent('form', () => form);
73
74
75
76

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

credits

mayank-patel