refactor: remove ToggleButton (#5095)

Author: oleksandrzavarzin-callstack

docs/6.x/docs/guides/migration.md

@@ -25,7 +25,6 @@ The following props now accept animated styles returned from `useAnimatedStyle`.
 - `Searchbar`: `style`
 - `Snackbar`: `style`
 - `Surface`: `style`
-- `ToggleButton`: `style`
 
 So you can use Reanimated's `useSharedValue` and `useAnimatedStyle` to animate these components instead of the React Native `Animated` API.
 
@@ -330,3 +329,31 @@ const theme = {
   style={{ fontSize: 16, color: '#1C1B1F' }}
 />
 ```
+
+### ToggleButton
+
+`ToggleButton`, `ToggleButton.Group` and `ToggleButton.Row` were removed. For an
+icon-only toggle, use `IconButton` with the `selected` prop. For a set of
+mutually exclusive options, use `SegmentedButtons`.
+
+```tsx
+// Before (v5)
+<ToggleButton.Group value={value} onValueChange={setValue}>
+  <ToggleButton icon="format-bold" value="bold" />
+  <ToggleButton icon="format-italic" value="italic" />
+</ToggleButton.Group>
+
+// After (v6)
+<>
+  <IconButton
+    icon="format-bold"
+    selected={value === 'bold'}
+    onPress={() => setValue('bold')}
+  />
+  <IconButton
+    icon="format-italic"
+    selected={value === 'italic'}
+    onPress={() => setValue('italic')}
+  />
+</>
+```

docs/component-docs.config.ts

@@ -149,11 +149,6 @@ const pages = {
       props: 'TextInputAccessoryProps',
     },
   },
-  ToggleButton: {
-    ToggleButton: 'ToggleButton/ToggleButton',
-    ToggleButtonGroup: 'ToggleButton/ToggleButtonGroup',
-    ToggleButtonRow: 'ToggleButton/ToggleButtonRow',
-  },
   Tooltip: {
     Tooltip: 'Tooltip/Tooltip',
   },

docs/src/data/screenshots.ts

@@ -149,9 +149,6 @@ export const screenshots = {
     filled: 'screenshots/text-input-filled.png',
     outlined: 'screenshots/text-input-outlined.png',
   },
-  ToggleButton: 'screenshots/toggle-button.png',
-  'ToggleButton.Group': 'screenshots/toggle-button-group.gif',
-  'ToggleButton.Row': 'screenshots/toggle-button-row.gif',
   Tooltip: 'screenshots/tooltip.png',
   TouchableRipple: 'screenshots/touchable-ripple.gif',
 };

example/src/ExampleList.tsx

@@ -44,7 +44,6 @@ import TextExample from './Examples/TextExample';
 import TextInputExample from './Examples/TextInputExample';
 import ThemeExample from './Examples/ThemeExample';
 import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
-import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TooltipExample from './Examples/TooltipExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
 
@@ -83,7 +82,6 @@ export const mainExamples = {
   Switch: SwitchExample,
   Text: TextExample,
   TextInput: TextInputExample,
-  ToggleButton: ToggleButtonExample,
   TooltipExample,
   TouchableRipple: TouchableRippleExample,
   Theme: ThemeExample,

example/src/Examples/ToggleButtonExample.tsx

@@ -10,7 +10,6 @@ import {
   FAB,
   IconButton,
   List,
-  ToggleButton,
   Tooltip,
   Card,
 } from 'react-native-paper';
@@ -39,7 +38,7 @@ const formOfTransport = [
 const TooltipExample = () => {
   const navigation = useNavigation('TooltipExample');
 
-  const [textAlign, setTextAlign] = React.useState('bold');
+  const [textAlign, setTextAlign] = React.useState('left');
   React.useLayoutEffect(() => {
     navigation.setOptions({
       header: () => (
@@ -91,22 +90,34 @@ const TooltipExample = () => {
             ))}
           </View>
         </List.Section>
-        <List.Section title="Toggle Buttons">
-          <ToggleButton.Row
-            value={textAlign}
-            style={styles.toggleButtonRow}
-            onValueChange={setTextAlign}
-          >
+        <List.Section title="Icon toggles">
+          <View style={styles.toggleRow}>
             <Tooltip title="Align left">
-              <ToggleButton icon="format-align-left" value="left" />
+              <IconButton
+                icon="format-align-left"
+                mode="contained-tonal"
+                selected={textAlign === 'left'}
+                onPress={() => setTextAlign('left')}
+              />
             </Tooltip>
             <Tooltip title="Align center">
-              <ToggleButton icon="format-align-center" value="center" />
+              <IconButton
+                icon="format-align-center"
+                mode="contained-tonal"
+                selected={textAlign === 'center'}
+                onPress={() => setTextAlign('center')}
+              />
             </Tooltip>
             <Tooltip title="Align right">
-              <ToggleButton icon="format-align-right" value="right" disabled />
+              <IconButton
+                icon="format-align-right"
+                mode="contained-tonal"
+                selected={textAlign === 'right'}
+                disabled
+                onPress={() => setTextAlign('right')}
+              />
             </Tooltip>
-          </ToggleButton.Row>
+          </View>
         </List.Section>
         <List.Section title="Avatar">
           <View style={styles.avatarContainer}>
@@ -178,7 +189,8 @@ const styles = StyleSheet.create({
   cardContainer: {
     margin: 16,
   },
-  toggleButtonRow: {
+  toggleRow: {
+    flexDirection: 'row',
     paddingHorizontal: 16,
   },
   iconButtonContainer: {