cnilton / react-native-floating-label-input Goto Github PK

Right now, if I use LabelStyle with CustomLabelStyles the custom values are override by the defaultt values we have in the code. let me explain:

the code for style (LabelStyle) looks like:

 const style: TextStyle = {
    left: labelStyles?.left !== undefined ? labelStyles?.left : 10,
    fontSize: staticLabel? (customLabelStyles?.fontSizeFocused !== undefined ? customLabelStyles.fontSizeFocused : 10) : !isFocused
      ? customLabelStyles.fontSizeBlurred
      : customLabelStyles.fontSizeFocused,
    color: !isFocused
      ? customLabelStyles.colorBlurred
      : customLabelStyles.colorFocused,
    ...setGlobalStyles?.labelStyles,
    ...labelStyles,
    position: 'absolute',
    flex:1,
    zIndex: 999,
  };

We need to move ...labelStyles and ...setGlobalStyles?.labelStyles to the top and then override with custom values if we have it. Something like:

const style: TextStyle = {
    ...labelStyles,
    ...setGlobalStyles?.labelStyles,
    left: labelStyles?.left !== undefined ? labelStyles?.left : 10,
    fontSize: staticLabel? (customLabelStyles?.fontSizeFocused !== undefined ? customLabelStyles.fontSizeFocused : 10) : !isFocused
      ? customLabelStyles.fontSizeBlurred
      : customLabelStyles.fontSizeFocused,
    color: !isFocused
      ? customLabelStyles.colorBlurred
      : customLabelStyles.colorFocused,
    position: 'absolute',
    flex:1,
    zIndex: 999,
  };

this is a problem if we have labelStyles where fontSize value can be use it and fontSizeBlurred or fontSizeFocused it will be override by the labelStyles values.

Right now we have setFocus function, but we don't have a way to set autoFocus for the input field, we can added because we have the TextInput props.

leftFocused & topFocused não fazem sentido se staticLabel for true, por que só teria left e top, não existiria focused nesse caso.

leftFocused & topFocused não funcionam no customLabelStyles se staticLabel for false, caso default dele.

Hi, thanks for this library!
So, the issue is customLabelStyles is expecting an object that can't really be matched, because it's expecting it's children's types to be the intended default values. When it receives the props on index.tsx it looks like this, when it should be specifying numbers and strings:

Then what happens in my code is I try to pass the values and this comes up:

If we have two input fields in the same screen, and we tap in the label the first is focused, but if we try to focus the second one tapping in the label, the second input field is not focused immediately

it could be possible we need to do some logic in our side instead, but it was weird this is not happening if we click in the container (input box)

using the sample from the ReadMe

<FloatingLabelInput
	label="Login"
	value={appleValue}
	onChangeText={value => setAppleValue(value)} />
<FloatingLabelInput
	label="Login"
	value={appleValue}
	onChangeText={value => setAppleValue(value)} />

Hello @Cnilton,

I'm using the latest version and I have issues with the label overlapping on the text both on ios and android (see videos), especially on ios where the label goes below and then on top of the text. Wouldn't it be preferable to remove the animation when the text input is filled?

Also label is focused when the text is empty (see picture).

Thanks

Not the whole page, only push if focused input stuck under the keyboard.

Is that possible and how?

This is more a question/request, right now when the input field is not focused and gain the focus, we're just changing the fontSize of the label and then we use translateX and translateY.

could be possible to add a scale for the fontSize? then the animation will look smoother.

I'm trying to make it work on my side, but if anyone can help with this too would be nice

Hello, I am trying to use this library but it keeps crashing and giving an error
---TypeError: undefined is not an object (evaluating '_reactNativeReanimated.EasingNode.linear')
Saying the issues is in \node_modules\react-native-floating-label-input\src\index.tsx with code line 439
and node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js line 15561.
Can any one help me out

<FloatingLabelInput
label="Password"
value={password}
isFocused={isPassFocused}
labelStyles={{ color: isPassFocused ? '#B6254E' : '#333333', fontSize: wp("4%"), marginLeft: 25 }}
containerStyles={{ borderWidth: 0, paddingLeft: 35, height: wp("15%"), }}
onFocus={() => {
setIsPassFocused(true);
}}
onBlur={() => {
password === '' && setIsPassFocused(false);
}}
isPassword={true}
inputStyles={{ borderBottomWidth: 0, borderBottomColor: 'grey' }}
onChangeText={value => setPassword(value)}
/>

I propose reanimated upgrade to version 2. To do that all usages of Easing have to be changed into EasingNode. To keep compatibility I would propose to publish

• library for reanimated 2 as 2.x.x
• library for reanimated 1 as 1.x.x.

This way it would be possible to use it with both versions.

Additionally I think it would be a good idea to clean the released files - delete:

• eslint config
• prettier
• watchman
• app.json
• jest
• babel
• metro

from the released package.

Is there any plans to add floating labels with drop downs (selects) like this ?

Using:

const { isFocused } = this.state;
<FloatingLabelInput
	ref={this.inputRef}
	label={placeholder}
	value={value}
	isFocused={isFocused}
	onChangeText={this.onChangeText}
	onFocus={this.onFocus}
	onBlur={this.onBlur} />

it blocks the animation for the label and it doesn't move at all

I install version ^4.2.0 and when pod install, I receive this message.
use_native_modules! skipped the react-native dependency 'react-native-floating-label-input'. No podspec file was found.
- Check to see if there is an updated version that contains the necessary podspec file
- Contact the library maintainers or send them a PR to add a podspec. The react-native-webview podspec is a good example of a package.json driven
podspec. See https://github.com/react-native-community/react-native-webview/blob/master/react-native-webview.podspec

I was testing and looks like, when We use isPassword={true} the animation when the field is onBlur is not working. The label is still on the top of the container and is not returning to the correct position

Hello team, I am using this plugon in my project and i used rounded border textfield in my whole app. My actual UI is as below

But currently in my application i got below textfiled with bottom gap

Below is my code for my textfield
<View style={{ marginTop: 10 }}>
<FloatingLabelInput
label={"FirstName}
value={firstName}
onChangeText={(value) => {
this.setFirstName(value)
}}
labelStyles={{
fontFamily: globals.ProximaNovaRegular,
color: 'black',
marginLeft:(Platform.OS == 'ios') ? -5 : 0
}}
/>

For tectfield border i change style as below in plugin style.js
container: {
flexDirection: 'row',
color: colors.darkWarmGrey,
borderColor: colors.darkWarmGrey,
borderWidth: 1,
borderRadius: 30,
paddingTop:(Platform.OS==='android') ? 0 : 5,
paddingLeft:20,
paddingRight:20,
paddingBottom:(Platform.OS==='android') ? 0 : 5,
marginTop:(Platform.OS==='android') ? 5 : 5,
alignContent: 'center',
justifyContent: 'center',
},

Any idea how I can make center align both as i want in real desgin

Animated node with ID 2 already exists, thats the error i get whenever i try to use this package in my react native project already having the react-native-reanimated package. something about two instances of reanimated

While I was looking through your code, I realized how incredibly easy it would be to make a small alteration to enable your library to also become an autosizing Textarea control.

I added a new attribute to Props interface in index.tsx at line 71

  isMultiline?: true | false | undefined;

and then applied that attribute to the TextInput at line 318

        multiline={props.multiline}

instant autosizing textarea using floating label and I don't have to roll my own. I even added a nifty "### characters left" on mine.

Just thought I would throw that out there in case you were interested in expanding the libraries functionality. I can create pull request with the changes if you like. Thanks =)

Right now, the prop hint is only use it when staticLabel is used in the code, we can use hint too when we use the normal floating label, for example:

Entering a date or birth we should display date of birth in the label and the hint could be mm/dd/yyyy to explain the users the input format.

I'm typing "100" and It stucks on "1,00" format.
(I make currencyDivider=".")

To change 1,00 to 100,00, I have to click on begining of the input and start typing.
But that's not good for UX.

How can I use it well?

If I try use that library i have error and my whole app not work.
TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode')

I trying v 1.3.5 with reanimated v2 and old 1.3.4 with reanimated v1

when using reanimated2 the app crash,
animated node with id 2 already
please make a version with reanimated2 dependency

hi , thanks for the wonderful library ...it helped a lot. But in this library onBlur is not working . I want to validate the entered input when the input field gets out of focus. Actually we can acheive this using onBlur for normal input field , but i am not able to find any props to achieve this in this library .

is there any prop to achieve this...Please help me out with this.

Hi
Maybe it's just me not understanding how to do it, but i can not make the text in a multiline input field align top. It is always centered vertically. How can i adjust this?

I want my input container to not have any spaces on the sides. How to achieve this?
I have added margin:0 and padding: 0 in containerStyles but doesnt work

thanks

Imagine we have a password field filled by default, and you want to show/hide when you present it into the screen, this probably is a unique case, but could be use it for different situations

Looks like the Floating label is not center either if We pass styles or we use the default values.

As we can see in the "login" input is still not centered

Code for the previous image:

<FloatingLabelInput
	placeholder="Enter a fruit name"
	showErrorMessage={messages.showError}
	value={value}
	onChangeText={onChangeText}
        containerStyles={containerStyle}
	labelStyles={styles.labelStyle}
	inputStyles={styles.inputStyle}
	customLabelStyles={CUSTOM_LABEL_STYLE} />
<FloatingLabelInput
	label="Login"
	value={value}
	onChangeText={nValue => setValue(nValue)}
	customLabelStyles={CUSTOM_LABEL_STYLE}/>

Styles code:

const CUSTOM_LABEL_STYLE = {
	fontSizeFocused: 12,
	fontSizeBlurred: 16,
	colorBlurred: 'grey',
	colorFocused: 'grey',
	leftFocused: 0,
	leftBlurred: 0,
	topFocused: 0,
	topBlurred: 0,
};
container: {
		height: 64,
		borderWidth: 2,
		borderRadius: 8,
		alignContent: 'center',
		paddingVertical: 8,
		paddingHorizontal: 16
	},
labelStyle: {
		left: 0, 
		marginLeft: 8
	},
inputStyle: {
		color: 'black',
	},

I have a question about using mask and maskType.
I want to use the text input for credit card input, I set the maskType to 'card', but what should be the mask for the card?
I want it to appear divided into groups of 4 digits. Can I achieve it with the properties?

Hello...thanks for writing this library!

I noticed in the GIF example you have on the README, the labels do a nice little animated bounce when the input field is clicked on. In my implementation, I don't see that animation...the labels just instantly jump to their position. Is there some additional configuration I can add to duplicate the animation effect that you have in your GIF example?

Thanks =)

This one is easy to reproduce, if you use:

<FloatingLabelInput
	label="Login"
	value="This is a value"
	onChangeText={nValue => setValue(nValue)}
	customLabelStyles={CUSTOM_LABEL_STYLE} />

the value is overlapping the label, and the label doesn't animate if the value exists in the component

Hi!
When you place FloatingLabelInputs inside a View container which has the alignItems style set to something different than 'stretch' (default), these inputs don't work properly. They are very narrow, placeholders go out of borders and the user input itself isn't visible.
I've tried setting width for the inputs to fix it, but it doesn't solve the issue - entered text gets cropped and is still not visible.

On the image below, the password field has it's style set to width: '80%' and the style of the container View is set to alignItems: 'center'

i navigation to screen with data and and setting this params data as value prop to floating input but majorly label is not animating to upside sometimes its working

What if I want the floating label to be on the right side for hebrew/arabic?
I tried to play with containerStyles, labelStyles and inputStyles, but I couldn't set the label to appear from the right.
Does this library support rtl, how can I achieve it?

Edit:
The only way I could put the label on the right is this styling:
labelStyles={{width:'100%', textAlign:'right'}}

But I'm not sure this is the correct way to do it.

It would be nice if we can add a left component to the floating input, then we can create components like:

in the Line 350, we have opacity props, in Typescript is returning a warning, this is the warning:

Type 'number | AnimatedInterpolation' is not assignable to type 'number | undefined'.
  Type 'AnimatedInterpolation' is not assignable to type 'number'

The expected type comes from property 'opacity' which is declared here on type 'TextStyle'

Hi,
I used editable={false} and selectTextOnFocus={false} but it doesn't work if input was set default value (I set default value from previous screen props at mounted using UseEffect)

Please help me to check this case. thanks so much

I want to Add "X" button inside input, but It doesnt allow it.
How can this be possible?

How can I add it inside?
Left component ok, but I need right component for that.

@Cnilton - Here on line 457 this is what is currently in index.tsx:

457  let imgSource = darkTheme
458    ? secureText
459      ? customShowPasswordImage || makeInvisibleBlack
460      : customHidePasswordImage || makeVisibleBlack
461    : secureText
462    ? customShowPasswordImage || makeInvisibleWhite
463    : customHidePasswordImage || makeVisibleWhite;

On line 459 we have our customShowPasswordImage but if it doesn't exist we have the 'makeInvisible' default image. This is conflicting, they should both be an image to 'show password'. Consequently lines 460, 462, 463 should change too.

Proposed changes:

457  let imgSource = darkTheme
458    ? secureText
459      ? customShowPasswordImage || makeVisibleBlack
460      : customHidePasswordImage || makeInvisibleBlack
461    : secureText
462    ? customShowPasswordImage || makeVisibleWhite
463    : customHidePasswordImage || makeInvisibleWhite;

Right now we have interface Props in the component, if people is going to use this component and want to extends from this, we should be able to export the props instead of copying in the code.

We have: interface Props extends TextInputProps

We can create: export interface FloatinLabelInputProps extends TextInputProps

Originally posted by @Uzef1997 in #25 (comment)

I noticed the currency mask allows multiple decimals and the number of decimal places is also not limited.

I think it would help to only allow one use of the decimal and default the number of decimal places to 2 with an override available for currencies that have zero or 3.

I might see if I can work up a pull request for this if I have time.

Right now in the Readme file you have

import showPassword from '../assets/images/yourImage';
import hidePassword from '../assets/images/yourImage2';
// ...
<FloatingLabelInput
  label="Password"
  value={password}
  isPassword={true}
  onChangeText={text => setPassword(text)}
  customShowPasswordImage={showPassword}
  customHidePasswordImage={hidePassword}
/>

Where We need to pass an image when a password field is used, can we add new params and use strings ( component) instead? something like Show and Hide could be use it.

Hi. I've just discovered your component. On your home page you are displaying simple usages of this component.
I'm trying to get this look (just the underline bottom border):

The default look of the component is the full border. Is there a flag I should toggle or should I apply some styling? It is not clear from the documentation.

Thanks for your assistance

Before I start complaining, this is a great package that really filled a void for us.
However there are two seemingly minor but very problematic issues.

1. Problem with some styles in the labelStyles prop not being recognized:

Here's our component code :

      <FloatingLabelInput
        labelStyles={{
          fontFamily: loaded ? "poppins-medium" : null,
          fontSize: 16,
          color: "#BDBDBD",
        }}
        inputStyles={{
          fontFamily: loaded ? "poppins-medium" : null,
          fontSize: 16,
          color: "#666666",
        }}
        label={title}
        value={text}
        onChangeText={(value) => setText(value)}
      />

The fontFamily in the labelStyles prop is being read correctly, but the fontSize and color attributes are not reflected in the app, font color and size remain at default values - 14px and dark grayish blue. At the same time both font size and color from the inputStyles are correctly reflected in the user input text.

2. When setting the same styles to globalStyles.js they are not being read at all, and the color of the user input defaults to the focused label color for some reason. The containerStyles are read globally and locally just fine.

Please advise! Thanks in advance

Hi team, i used thi splugin for floating effect in my textinput and i used it latest version 1.3.5 but i afce issue like when i have pre defined text in textinput it will be overlap like below screenshots

My code as below

<FloatingLabelInput
label={textTranslation.shippingAddress.FLATNAME}
value={flateName}
onChangeText={(value) => {
this.setState({ flateName: value });
}}
labelStyles={{
fontFamily: globals.ProximaNovaRegular,
color: colors.darkWarmGrey,
}}
/>

Any idea how i can solve it?

When having a multi line input field with a height setting to more than one row, the placeholder text is vertically centered. It needs to be aligned top to look good.