react-native-paper
react-native-paper copied to clipboard
callstack
Disabled button with padding
I have a form that while is sending data I set disabled and loading for button. I don't know why, I'm getting a strange padding. I cannot reproduce is a simple example. Any idea?
Hey @wilav-dev, the label in Button component, in MD3, by default have the following styles:
md3Label: {
marginVertical: 10,
marginHorizontal: 24,
},
You can override them using labelStyle prop.
Thank you but actually i'm forcing to v2 theme. I had tried to replace margins and paddings but still having same issue.
Isn't it an issue with the elevation prop when the elevated container has a semitransparent background?
@cicerotcv yes it is that combination. I use v2 theme.
If I remove alpha from this lines
or elevation from this lines
then it works fine. I'm not sure why elevation is 2 when button is being disabled for a moment while making a post.
Do you know the fix for this issue?
Could you please present how the Button is used in your code in order to reproduce the issue, since I'm not able to observe the problem which you're facing?
@lukewalczak @cicerotcv Here is an example, the bug occurs only in Android. I'm not sure, I can reproduce it sometimes, for example after editing code and tap button again.
https://snack.expo.dev/@yamifr07/react-native-paper-example_v5?platform=android
Actually, I was not able even once to observe the issue, so maybe you can investigate the issue and suggest the solution 🤔
https://snack.expo.dev/@yamifr07/react-native-paper-example_v5?platform=android
I was able to reproduce using this link here
@cicerotcv Thank you for your message. I'm not able to find the fix. Any idea?
@cicerotcv Thank you for your message. I'm not able to find the fix. Any idea?
Sorry for the late reply. I'll take a look as soon as I can. I have never experienced it myself with react-native-paper. My guess is that elevation is not being set to zero when disabled is true
Enabled button also behave like this. If you add padding to the button itself, the padding part can't be clicked.
A workaround is use labelStyle={{ padding: ButtonLabelPadding }}, and remove padding from button itself, which is not convenient.
