React-native-paper: Contained button in v2 is not good when compared with raised button in v1

[vineeshvk]

The behavior of contained button in react-native-paper is not looking good when compared with version 1 raised button. I started using react-native-paper only because of the material buttons as no other UI library implemented the material button correctly. So please change the button to v1.
Thank you.

[satya164]

Whether it looks good is subjective. I like the new design, it looks fresh.

Besides they are not even that different. The only differences are that we increased the default roundness in v2 which you can decrease back to 2 in the theme to have it the same as v1, and the new button has a letter spacing of 1.

The old button style can also be replicated with the current button:

<Button mode="contained" theme={{ roundess: 2 }}>
  <Text style={{ letterSpacing: 0 }}>PRESS ME</Text>
</Button>

Regardless, these follow the new design guidelines from Google. react-native-paper aims to follow the material design guidelines closely. We won't purposefully deviate from the guidelines if there's not a good reason to do so.

[vineeshvk]

I'm not just talking about the Look of the button, I'm talking about the feel of the button. The v1 button raises and falls just like a native material button but this new version seems to lack it.
Please consider comparing both buttons side by side, then you'll know the difference.

[satya164]

The new buttons raise and fall the same. It's literally the same code with few changes for v2.

[vineeshvk]

Oh sorry, I guess it was the debugger that made it clunky and weird. Thanks for the help. And sorry for wasting your time

[satya164]

Yeah, the debugger can mess up animations. When you're testing animations, I'd recommend to turn the debugger off.

[bhaskarmurthy]

Question - looks like v2 button has borderless set to true, and no way to override it. This causes the ripple to pop out of the button boundaries. Any chance we can revert this behaviour and not set borderless?

[zth]

@bhaskarmurthy did you find any solution to that? I have the same issue, the ripple more or less fills the entire screen instead of just the thing pressed.

[bhaskarmurthy]

@zth ended up forking rn-paper and updating the Button.js to set borderless: false by default, and accept a prop for borderless to override the behaviour if desired.

[satya164]

@bhaskarmurthy borderless={false} doesn't respect the border radius of the button and it still extends outside the button at corners. we have temporarily disabled ripple effect on Android P because there are too many issues until we figure how to fix/workaround the issue.

[bhaskarmurthy]

@satya164 thanks for the quick response! you're right, it does extend to the whole background if a radius is supplied - in my case I needed the ripple regardless of that behaviour, and having an override at least provided that option if needed. (also why i closed my PR into this as a fix since I figured you guys are already aware). thanks for the awesome work on this library :)

[satya164]

@satya164 the reason we don't wanna provide prop because this is a bug which occurs in Android P and regardless of if you set borderless to false, it doesn't entirely fix the issue. we did some investigation and it looks like we can use https://github.com/kmagiera/react-native-gesture-handler which seems to work properly in all Android versions.