Button roundness being ignored

[jacquesdev]

Current behaviour

Setting roundness seems to have no effect on a Button component

Expected behaviour

Setting theme={{ roundness: 5 }} should set it to the custom value

How to reproduce?

Setting theme={{ roundness: 5 }} at the component level, or passing this value in at the global theme level seems to have no effect.

I found it will change if I set it in the Button component theme={{ isV3: false, roundness: 5 }}. I'm not sure why I need to set it to false, seems like a bug to me? Adding isV3 in the global theme object does not make a difference unfortunately, and ideally I'd like to define it a the global theme level.

Preview

v3 = not defined

v3 = false

What have you tried so far?

Playing around with the v3 version

Your Environment

software	version
ios	x
android	x
react-native	0.71.8
react-native-paper	5.8.0
node	x.x.x
npm or yarn	npm
expo sdk	48.0.18

[lukewalczak]

Hey @jacquesdev, I'm not able to reproduce the issue related to setting roundness in the Button component.

There are two ways to do that:

• use style property:

  <Button
    mode="contained-tonal"
    onPress={() => {}}
    style={{ borderRadius: 10 }}
  >
    Press
  </Button>

• override the roundness using theme prop:

  <Button
    mode="contained-tonal"
    onPress={() => {}}
    theme={{ roundness: 2 }}
  >
    Press
  </Button>

I found it will change if I set it in the Button component theme={{ isV3: false, roundness: 5 }}. I'm not sure why I need to set it to false, seems like a bug to me? Adding isV3 in the global theme object does not make a difference unfortunately, and ideally I'd like to define it a the global theme level.

About the isV3 property you can read more there

[jacquesdev]

Hi Luke!

Thanks, I'll try to recreate it when I get a second on a separate project. I can definitely use style that works fine - but when I use theme with roundness it seems to be happening.

[lukewalczak]

Closing the issue, however, if you will be able to reproduce the issue, feel free to attach the repro and reopen it

Did you fix it by any chance ? Having the same issue

[jacquesdev]

iirc I ended up setting the roundness in a separate style, not at the theme level

[fxricky]

I'm facing the same issue now, setting the roundness at component level works fine.
However, when I try to apply roundness at the theme level, the roundness only works after applying isV3 : false 👀

    <PaperProvider
      theme={{
        isV3: false,
        roundness: 2,
        ...PaperGeneratedColors,
      }}
    >

[kferch-teamworks]

Button border radius for v3 should use theme roundness but does not properly do so.