Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can't set topFocused when using staticLabel={true} #81

Open
louisholley opened this issue May 24, 2021 · 2 comments
Open

can't set topFocused when using staticLabel={true} #81

louisholley opened this issue May 24, 2021 · 2 comments
Labels
enhancement New feature or request

Comments

@louisholley
Copy link

louisholley commented May 24, 2021

in the docs for staticLabel it says:

"For changing the position of the label with this prop as true, use the customLabelStyles topFocused and leftFocused to adjust the wanted position"

but the implementation is like this:

{staticLabel && (
          <AnimatedText
            onPress={setFocus}
            style={[
              style,
              {
                left: labelStyles?.left
                  ? labelStyles?.left
                  : customLabelStyles.leftFocused
                  ? customLabelStyles.leftFocused
                  : 20,
                top: -(style?.fontSize ? style?.fontSize : 10) / 2,
              },
            ]}
          >
            {label}
          </AnimatedText>
        )}

so setting topFocused doesn't have any effect when using staticLabel={true}

@Cnilton
Copy link
Owner

Cnilton commented May 24, 2021

Hi @louisholley, yes you are right, but I don't think staticLabel should be used along with topFocused.. I will move the order for the left and top styles to have lower priority than labelStyles like:

{staticLabel && (
          <AnimatedText
            onPress={setFocus}
            style={[
              {
                left: labelStyles?.left
                  ? labelStyles?.left
                  : customLabelStyles.leftFocused
                  ? customLabelStyles.leftFocused
                  : 20,
                top: -(style?.fontSize ? style?.fontSize : 10) / 2,
              },
              style
            ]}
          >
            {label}
          </AnimatedText>
        )}
        
//...

So then the right usage scenario would be something like:

<FloatingLabelInput
    // ...
    labelStyles={{ top: 15, left: 20}}
    />

@louisholley
Copy link
Author

@Cnilton sounds ideal man, let me know when you've made the change! thanks a lot

@Cnilton Cnilton added the enhancement New feature or request label Mar 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants