mayank-patel/react-native-floating-labels

React Native Floating Labels Library

react-native-floating-labels

A <FloatingLabel> 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

'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 (
      <View style={styles.container}>
        <FloatingLabel 
            labelStyle={styles.labelInput}
            inputStyle={styles.input}
            style={styles.formInput}
            value='[email protected]'
            onBlur={this.onBlur}
          >Email</FloatingLabel>
        <FloatingLabel 
            labelStyle={styles.labelInput}
            inputStyle={styles.input}

            style={styles.formInput}
          >First Name</FloatingLabel>
        <FloatingLabel
            labelStyle={styles.labelInput}
            inputStyle={styles.input}
            style={styles.formInput}
          >Last Name</FloatingLabel>
      </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:

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

react-native-floating-labels's Issues

TypeError: "exports" is read-only

Hello,

To use your package with expo web, can you change
module.exports = FloatingLabel;

to
export default FloatingLabel;

Not able to change cursor color

Hello Mayank,
Thanks for the library. I noticed that one cannot change the cursor color by using the selectionColor prop provided by TextInput. I have simply added that prop in #35

clear() methot like TextInput

adding clear() method make better this library

SCrollview not works when user scrolls

Hello, I've several floating labels in a view inside the Scrollview. The issue I face that the scrollview not works if the user scrolls while focusing a floating label. However the scrolls works fine in TextInput even if the focus is on it but not working in floating label. Could you please let me know how can I sort this issue out. As I've too many floating labels on page, so whenever user try to scroll the page putting finger on the label, the text inside that scrolls a little,but not the complete page

onSubmitEditing

onSubmitEditing is not calling

Cannot read property bool of undefined

I have installed this module but it is giving an error Cannot read property bool of undefined

Floating label doesn't work properly with events

I am having issue with FloatingLabel, whenever I use onChangeText event, my floating label floats at his starting position when I write something. But it works perfectly when I don't use onChangeText , onBlur and other events. Please help!

    <FloatingLabel
              labelStyle={Styles.labelInput}
              inputStyle={Styles.input}
              style={Styles.formInput}
              underlineColorAndroid="transparent"
              secureTextEntry={true}
              onChangeText={(password) => this.setState({password})}
          >Password</FloatingLabel>

Styles:

 labelInput: {
    fontSize: 16,
  },

  formInput: {
    borderBottomWidth: 1,
    borderColor: '#e6e6e6',
  },
  input: {
    fontSize: 14,
    borderWidth: 0
  }

Default border bottom is appearing in android.

When the app is initialized, each time it is showing default android green color border at bottom of the text input.

But, if I am reloading the app, it's working fine as the style I wrote for the input.

How to make use of Ref for focus in this library

How to make use of Ref for focus in this library

how to change underline color of input box in android??

Is there a way to make MaxLength ?

unable to resolve module 'create-react-class'

Hi,
I installed your package using npm install react-native-floating-labels --save

but my build fails and the error is unable to resolve module 'create-react-class in react-native-floating-labels\\index.js.

any fix for this?

selectionColour not working

Even after the prop being added in #35, the cursor's selection cooler is not working.

Thanks!

Remove or update dependence on ViewPropTypes

ViewPropTypes has been deprecated for React Native 0.68.0. They need to be imported from the 'deprecated-react-native-prop-types' library.

Otherwise there is a runtime error.

ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

on android if you change setting for fonts to 'Huge' the letters in text input are cut by a third

Though the fonts are increasing proportionally the hight of the component does not. As a temporary fix I just pass the height for the text input 45 but it is not the best solution.

useNativeDriver Warning

To solve that Warning accept the Pull Request from @daichi000

Pull Request

doesn't work on react native 0.11.0

App doesn't start up. See images below:

secure text entry?

Does this support secure text entry?
edit: sorry didn't see the password input field #mybad

Property "password" does not works on android

React Native 0.39.2
Android 7.1.1 & 6.0.1 & 5.1
IOS 10.2

IOS :

Android :

My code

import FloatingLabel from 'react-native-floating-labels';

<FloatingLabel
            labelStyle={styles.labelInput}
            inputStyle={styles.input}
            password={true}
            onChangeText={(e) => EmployerData.password = e.trim().replace('+', encodeURIComponent('+'))}
            style={[styles.formInput, styles.textfieldWithFloatingLabel, { marginTop: mainComponent.state.marginBetweenFields, borderColor: mainComponent.state.underlineColor }]}>Contraseña</FloatingLabel>

This code works properly on IOS but on Android the letters are not hiding,
I had test it on Android 7.1.1 (Nougat), 6.0.1 (Marshmallow), 5.1 (lollipop)

Mask property

How can I put a mask in the field?

this.field_name.Focus() is not working

ref={(input)=>this.field_name = input}
or
ref="field_name"
not woking..

password doesn't work on android

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

I am getting the following warning.

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: FloatingLabel

more props require

props maxLength,numberOfLines,default values are not available