Cnilton / react-native-floating-label-input

A customizable React Native TextInput with its placeholder always shown. Includes masks, global styles, character count, and a bunch else.
MIT License
293 stars 60 forks source link

Bug with label focusing #78

Closed lazarspasic96 closed 3 years ago

lazarspasic96 commented 3 years ago
Capture

When I run the application in development mode it works totally fine, but when I build a release app the label not work. It's the same with custom label styles and without. I deliver the default name value to the floating input. It's not an empty string when the component is mounted.

      <FloatingLabelInput
        label={label}
        value={value}
        onChangeText={onChange}
        keyboardType={keyboardType}
        autoCapitalize={autoCapitalize}
        isPassword={isPassword}
        customShowPasswordComponent={customShowPasswordComponent}
        customHidePasswordComponent={customHidePasswordComponent}
        isFocused={isFocused}
        onFocus={() => { setIsFocused(true) }}
        onBlur={() => { setIsFocused(false) }}
        ref={inputRef}
        blurOnSubmit={false}
        {...rest}
    This is my code. 
Cnilton commented 3 years ago

Hi, @lazarspasic96 can you please post those variables because without them I cannot reproduce the same environment of the issue described. Also, what is defined in the ...rest prop?

lazarspasic96 commented 3 years ago

`const FormInput = ({ field, label, value, onChange, keyboardType, autoCapitalize, isPassword, customShowPasswordComponent, customHidePasswordComponent, errors, inputRef, ...rest }) => {

const [isFocused, setIsFocused] = useState(false)`

This is what my FormInput component receives as props. The res props is just for sending some additional props to the Floating label"

const [firstName, setFirstName] = useState(name) const [lastName, setLastName] = useState(surname)

This is where I call that component <FormInput label="Ime" errors={errorMessages} field="name" value={firstName} inputRef={firstNameRef} onSubmit={() => firstNameRef.current.focus()} returnKeyType="next" maxLength={50} onChange={setFirstName} containerStyles={formStyles.FormInput} />

          The values for name and surname I set in the useEffect
            useEffect(() => {
setFirstName(name)
setLastName(surname)

}, [dateOfBirth, userGender, name, surname])

All work perfectly fine in development mode, but when I build app, it does not work very well.

Cnilton commented 3 years ago

Okay, I'll try to reproduce this issue. Can you inform the used version of this lib?

lazarspasic96 commented 3 years ago

Current version is 1.3.4

lazarspasic96 commented 3 years ago

Any update on this? @Cnilton

Cnilton commented 3 years ago

@lazarspasic96, sorry, not yet, I'll try to give feedback until the end of the week, ok?

lazarspasic96 commented 3 years ago

@Cnilton Okay, thank you :)

lazarspasic96 commented 3 years ago

Is there some way to disable the animation when the value is not an empty string?

Cnilton commented 3 years ago

@lazarspasic96, I'm sorry, but I couldn't reproduce this issue. Code used:

<FloatingLabelInput
      label={'label'}
      value={val}
      onChangeText={(newValue)=> setVal(newValue)}
      autoCapitalize={'words'}
      isFocused={focused}
      onFocus={() => { setFocused(true) }}
      onBlur={() => { setFocused(false) }}
      blurOnSubmit={false}
      />

and running with npx react-native run-android --variant=release

for disabling animation use staticLabel prop.

Cnilton commented 3 years ago

@lazarspasic96 any updates?

lazarspasic96 commented 3 years ago

@Cnilton I have not fixed it. Still didn't work in a release. You can close the issue, and I will reach out to you if I find out what the issue is.

Cnilton commented 3 years ago

@lazarspasic96, ok I'll do so. Did you try running with npx react-native run-android --variant=release ?