feat: add SegmentedButtons component (#3283)

Co-authored-by: Satyajit Sahoo <[email protected]>

docs/pages/10.migration-guide-to-5.0.md

@@ -491,6 +491,39 @@ Previously `elevation` was passed inside the `style` prop. Since it supported no
 + <Surface elevation={1} />
 ```
 
+## SegmentedButtons
+
+`SegmentedButtons` is a completely new component introduced in the latest version. It allows people to select options, switch views, or sort elements. It supports single and multiselect select variant and provide a lot of customization options.
+
+![segmentedButtons](screenshots/segmentedbuttons.gif)
+
+```js
+const MyComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+      <SegmentedButtons
+        value={value}
+        onValueChange={setValue}
+        buttons={[
+          {
+            value: 'walk',
+            label: 'Walking',
+          },
+          {
+            value: 'train',
+            label: 'Transit',
+          },
+          {
+            value: 'drive',
+            label: 'Driving',
+          },
+        ]}
+      />
+  );
+};
+```
+
 ## TextInput.Icon
 
 The property `name` was renamed to `icon`, since the scope and type of that prop is much wider than just the icon name – it accepts also the function which receives an object with color and size properties and 

example/src/ExampleList.tsx

@@ -38,6 +38,7 @@ import TouchableRippleExample from './Examples/TouchableRippleExample';
 import ThemeExample from './Examples/ThemeExample';
 import RadioButtonItemExample from './Examples/RadioButtonItemExample';
 import AnimatedFABExample from './Examples/AnimatedFABExample';
+import SegmentedButtonExample from './Examples/SegmentedButtonsExample';
 
 export const examples: Record<
   string,
@@ -69,6 +70,7 @@ export const examples: Record<
   radioGroup: RadioButtonGroupExample,
   radioItem: RadioButtonItemExample,
   searchbar: SearchbarExample,
+  segmentedButton: SegmentedButtonExample,
   snackbar: SnackbarExample,
   surface: SurfaceExample,
   switch: SwitchExample,

example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { List, SegmentedButtons } from 'react-native-paper';
+
+const SegmentedButtonDefault = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <List.Section title={`Segmented Button`}>
+      <SegmentedButtons
+        value={value}
+        onValueChange={setValue}
+        buttons={[
+          {
+            value: 'walk',
+            icon: 'walk',
+            label: 'Walking',
+            style: styles.button,
+          },
+          {
+            value: 'train',
+            icon: 'train',
+            label: 'Transit',
+            style: styles.button,
+          },
+          {
+            value: 'drive',
+            icon: 'car',
+            label: 'Driving',
+            style: styles.button,
+          },
+        ]}
+        style={styles.group}
+      />
+    </List.Section>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+  },
+  group: { paddingHorizontal: 20, justifyContent: 'center' },
+});
+
+export default SegmentedButtonDefault;

example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { List, SegmentedButtons } from 'react-native-paper';
+
+const SegmentedButtonDisabled = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <List.Section title={`Segmented Button - disabled`}>
+      <SegmentedButtons
+        onValueChange={setValue}
+        buttons={[
+          {
+            value: 'walk',
+            label: 'Walking',
+            style: styles.button,
+          },
+          {
+            value: 'disabled',
+            label: 'Disabled',
+            disabled: true,
+            style: styles.button,
+          },
+          {
+            value: 'drive',
+            label: 'Driving',
+            style: styles.button,
+          },
+        ]}
+        value={value}
+        style={styles.group}
+      />
+    </List.Section>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+  },
+  group: { paddingHorizontal: 20, justifyContent: 'center' },
+});
+
+export default SegmentedButtonDisabled;

example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { List, SegmentedButtons } from 'react-native-paper';
+
+const SegmentedButtonMultiselect = () => {
+  const [value, setValue] = React.useState<string[]>([]);
+
+  return (
+    <List.Section title={`Segmented Button - multiselect`}>
+      <SegmentedButtons
+        multiSelect
+        onValueChange={setValue}
+        value={value}
+        style={styles.group}
+        buttons={[
+          {
+            style: styles.button,
+            value: 'walk',
+            label: 'Walking',
+            showSelectedCheck: true,
+          },
+          {
+            style: styles.button,
+            value: 'transit',
+            label: 'Transit',
+            showSelectedCheck: true,
+          },
+          {
+            style: styles.button,
+            value: 'drive',
+            label: 'Driving',
+            showSelectedCheck: true,
+          },
+        ]}
+      />
+    </List.Section>
+  );
+};
+
+const styles = StyleSheet.create({
+  group: { paddingHorizontal: 20, justifyContent: 'center' },
+  button: {
+    flex: 1,
+  },
+});
+
+export default SegmentedButtonMultiselect;

example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { List, SegmentedButtons } from 'react-native-paper';
+
+const SegmentedButtonMultiselectIcons = () => {
+  const [value, setValue] = React.useState<string[]>([]);
+
+  return (
+    <List.Section title={`Segmented Button - multiselect only icons`}>
+      <SegmentedButtons
+        multiSelect
+        onValueChange={setValue}
+        value={value}
+        style={styles.group}
+        buttons={[
+          {
+            value: 'size-s',
+            icon: 'size-s',
+          },
+          {
+            value: 'size-m',
+            icon: 'size-m',
+          },
+          {
+            value: 'size-l',
+            icon: 'size-l',
+          },
+          {
+            value: 'size-xl',
+            icon: 'size-xl',
+          },
+          {
+            value: 'size-xxl',
+            icon: 'size-xxl',
+          },
+        ]}
+      />
+    </List.Section>
+  );
+};
+
+const styles = StyleSheet.create({
+  group: { paddingHorizontal: 20, justifyContent: 'center' },
+});
+
+export default SegmentedButtonMultiselectIcons;

example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { List, SegmentedButtons } from 'react-native-paper';
+
+const SegmentedButtonOnlyIcons = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <List.Section title={`Segmented Button - only icons`}>
+      <SegmentedButtons
+        onValueChange={setValue}
+        style={styles.group}
+        value={value}
+        buttons={[
+          {
+            icon: 'walk',
+            value: 'walk',
+          },
+          {
+            icon: 'train',
+            value: 'trainsit',
+          },
+          {
+            icon: 'car',
+            value: 'drive',
+          },
+        ]}
+      />
+    </List.Section>
+  );
+};
+
+const styles = StyleSheet.create({
+  group: { paddingHorizontal: 20, justifyContent: 'center' },
+});
+
+export default SegmentedButtonOnlyIcons;

example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { List, SegmentedButtons } from 'react-native-paper';
+
+const SegmentedButtonOnlyIconsWithCheck = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <List.Section title={`Segmented Button - icons + show selected check`}>
+      <SegmentedButtons
+        onValueChange={setValue}
+        style={styles.group}
+        value={value}
+        buttons={[
+          {
+            icon: 'walk',
+            value: 'walk',
+            showSelectedCheck: true,
+          },
+          {
+            icon: 'train',
+            value: 'transit',
+            showSelectedCheck: true,
+          },
+          {
+            icon: 'car',
+            value: 'drive',
+            showSelectedCheck: true,
+          },
+        ]}
+      />
+    </List.Section>
+  );
+};
+
+const styles = StyleSheet.create({
+  group: { paddingHorizontal: 20, justifyContent: 'center' },
+});
+
+export default SegmentedButtonOnlyIconsWithCheck;

example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { List, SegmentedButtons } from 'react-native-paper';
+
+const SegmentedButtonWithDensity = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <List.Section title={`Segmented Button - only labels + density`}>
+      <SegmentedButtons
+        onValueChange={setValue}
+        value={value}
+        density="medium"
+        style={styles.group}
+        buttons={[
+          {
+            style: styles.button,
+            value: 'walk',
+            label: 'Walking',
+          },
+          {
+            style: styles.button,
+            value: 'transit',
+            label: 'Transit',
+          },
+          {
+            style: styles.button,
+            value: 'drive',
+            label: 'Driving',
+          },
+        ]}
+      />
+    </List.Section>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+  },
+  group: { paddingHorizontal: 20, justifyContent: 'center' },
+});
+
+export default SegmentedButtonWithDensity;