eyaleizenberg / react-native-floating-label-text-input

A React Native component for floating label text input

React Native Floating Label Text Input

What is this?

This component will render an iOS styled text field with floating label animation. When there is no value, the placeholder will be centered. Once there is a value, the value will slide down and the label will fade in and slide up.

Credits for the concept to Matt D. Smith (@mds), and his original design.

Installation

npm install react-native-floating-label-text-input --save

Usage example

import FloatLabelTextInput from 'react-native-floating-label-text-input';

class SomeComponent extends Component {
  render () {
    return (
      <View>
        <FloatLabelTextInput
          placeholder={"name of field"}
          value={"value of field"}
          onFocus={@myFocusFunction}
          onBlur={@onBlurFunction}
        />
      </View>
    );
  }
}

Component props

• placeholder (String) - String that will be used as the placeholder if there is no value. It will also be the string used for the label when there is a value.
• secureTextEntry (Bool) - If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false.
• keyboardType (Enum) - enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search').
• value (String) - Value of the text input.
• onFocus (Function) - Function to be called on focus.
• onBlur (Function) - Function to be called on blur.
• onChangeTextValue (Function) - Function to be called when text is modified.
• noBorder (Boolean) - Hide the border bottom of the field.
• maxLength (Number) - Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
• selectionColor (String) - The highlight (and cursor on ios) color of the text input.

Questions/Bugs/Ideas?

Feel free to open an issue on github, send suggestions, fork this repository or contact me at [email protected]

This package was developed during my work at Samanage.

Thanks and Enjoy! :)

react-native-floating-label-text-input's Issues

Improvement : enabling multiline mode

Hi,

Not really a bug but this would be a nice improvement to a nice and neat package.

Thanks for the job so far !

Regards

Motivation?

I was wondering what was the motivation for this module? Is this true to the human interface design guidelines by apple? Is this effect seen in ios?

Thanks for this awesome lib!

How can i change backgroundColor?

<FloatingLabelTextInput
                  containerStyle={{ width: '100%', height: 80, backgroundColor:'#000'}}
                  onChangeText={this.onChangeText}
                  placeholder={`Point`}
                  value={this.state.name}
                  maxLength = {8}
                  style={{color:'transparent'}}
                />

borderColor cannot be updated through style props

Error: Seems you're trying to access 'ReactNative.createClass' from the 'react-native' package

With react-native 0.29.0 I got the error-message

Seems you're trying to access 'ReactNative.createClass' from the 'react-native' package. Perhaps you meant to access 'React.createClass' from the 'react' package instead?
For example, instead of:
import React, { Component, View } from 'react-native';
You should now do:
import React, { Component } from 'react';
import { View } from 'react-native';

To fix this in 'index.js'

var React = require('react-native');
var { StyleSheet, Text, View, TextInput, Animated } = React;

should be changed to

import React from 'react';
import { StyleSheet, Text, View, TextInput, Animated } from 'react-native';

Optional width?

Is there any plan to add optional width props for input?

How to change placeholder text color on active?

default color is #1482fe how to change this??

padding view on left

Why is there a padding on the left side? If it must be there it should have a parameter to remove it?

option for a multiline textarea input?

text not changed after calling function

Hi, tried the package, looks awesome, but the input text is not changed after modifications

Changing font size and font family of the input?

Hello and thank you for the great component! It works perfectly and I do not have any issues with it. I just would like to ask how I can change the font size and the font family of the input?

*P.S: It's not a bug but a question which I couldn't find in the documentation.

Thank you again!

Custom input and label style

Hi Auther,
Thanks so much for creating this library. Please update props for custom label style and textInput.

Does it support Android?

I make a try on Android platform, it can't represent the value of filed.

Any support for using `useNativeDriver`?

TextInput onChange is creating a new callback function on every render, thus making it slow

In react, Ideally we should not have arrow functions declarations in onChange callbacks. Instead, we should pass a reference of an already declared function. Otherwise we will end up creating a new function each time render is called and app will be slow.
Take a look at this code on line no: 109

<TextInput {...this.props}
                ref='input'
                underlineColorAndroid="transparent"
                style={[styles.valueText]}
                defaultValue={this.props.defaultValue}
                value={this.state.text}
                maxLength={this.props.maxLength}
                onFocus={() => this.setFocus()}
                onBlur={() => this.unsetFocus()}
                onChangeText={(value) => this.setText(value)}
/>

onChange should be written like this:

onChange={this.onInputChange}

and then we declare the onChange function only once in the component

onInputChange = value => this.setState({ value });

I will raise a PR, let me know :)

Disabling the text input component?

Looking at the list of props, I don't see one for disabled or editable.
Can either of these props be passed into the component to disable it on the form?
Or do these props trickle down to an underlying text input?

I think this is a common use case when rendering a form to conditionally disable inputs.

autoCapitalize and autoCorrect props seem to have no affect

I am running into an issue where adding properties for autoCorrect and autoCapitalize have no affect on the input field.

<FloatLabelTextInput placeHolder='Username' autoCapitalize='none' autoCorrect={false} />

react-native-floating-label-text-input is not visible in react-native-popup-dialog

I am using react-native-popup-dialog with FloatingLabelTextInput but it is not shown within Dialog. whereas simple TextInput component of react-native is appearing within. What is the issue with it?
Below is my code:

<PopupDialog
          dialogTitle={<DialogTitle title="Dialog Title" />}
          ref={(popupDialog) => { this.popupDialog = popupDialog; }}>
            <View>
            <Text>Hello</Text>

            <TextInput
              style={{height: 40}}
              selectionColor="#f66e09"
              keyboardType= 'default'
              placeholder="First Name and Last Name"
              autoCapitalize = "none"
            />
            <FloatLabelTextInput
              style={{height: 40}}
              selectionColor="#f66e09"
              keyboardType= 'numeric'
              placeholder="Contact No."
              autoCapitalize = "none"
            />
            <TextInput
              style={{height: 40}}
              selectionColor="#f66e09"
              keyboardType= 'email-address'
              placeholder="Email"
              autoCapitalize = "none"
            />
          </View>
        </PopupDialog>

Needs to be updated to use latest React Native.

Ref and onSubmitEditing support

Does it support this 2 props? I couldn't seems to access it, I'm trying to do keyboard select next input

add defaultValue prop

I understand that onChangeTextValue allows you to manage a piece of state that will provide similar functionality to this. Was omitting a defaultValue prop purely a design decision? If not, I'd love to see this implemented just as it is in react-native's TextInput component. Thanks!