1

I want to custom style the SegmentedButtons from react-native-paper library.

I want to either remove the border or make them square shaped. By default the SegmentedButtons come with rounded corners.

As a solution I tried styling the SegmentedButtons with StyleSheet and also inline style. I tried following properties:

{ 
  borderRadius: 0,
  borderWidth: 0
}

None of them worked.

Ahmed Sbai
  • 10,695
  • 9
  • 19
  • 38
Vikrant Bhurke
  • 11
  • 1

2 Answers2

1

You can style each button individually with the style prop, in order to remove the rounded corners. Then override the theme with roundness: 0 so that you fix the ripple effect styles.

<SegmentedButtons
  value={value}
  onValueChange={setValue}
  density="medium"
  theme={{ roundness: 0 }}
  buttons={[
    {
      value: "walk",
      label: "Walking",
      style: {
        borderRadius: 0,
      },
    },
    {
      value: "train",
      label: "Transit",
      style: {
        borderRadius: 0,
      },
    },
    {
      value: "drive",
      label: "Driving",
      style: {
        borderRadius: 0,
      },
    },
  ]}
/>;

enter image description here

z_lander
  • 104
  • 1
  • 8
1

You can try using the theme prop instead:

  <SegmentedButtons
     value={value}
     onValueChange={setValue}
     buttons={[
       {
         value: "walk",
         label: "Today",
       },
       {
         value: "train",
         label: "Future",
       },
     ]}
     theme={{ roundness: 2 }}
  />
keno
  • 11
  • 1