feat: modernize Switch to MD3

* BREAKING CHANGE: Switch props no longer extend native Switch. color, ios_backgroundColor, trackColor, thumbColor etc. are removed. Use the theme prop for color customization.

Author: adrcotfas

example/src/Examples/SwitchExample.tsx

@@ -1,73 +1,103 @@
 import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import { Palette, Switch, Text, TouchableRipple } from 'react-native-paper';
+import { Switch, Text, useTheme } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
+const Row = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => (
+  <View style={styles.row}>
+    <Text>{label}</Text>
+    <View style={styles.right}>{children}</View>
+  </View>
+);
+
 const SwitchExample = () => {
-  const [valueNormal, setNormalValue] = React.useState<boolean>(true);
-  const [valueCustom, setCustomValue] = React.useState<boolean>(true);
+  const theme = useTheme();
+  const [defaultOn, setDefaultOn] = React.useState(true);
+  const [defaultCheckedIconOn, setDefaultCheckedIconOn] = React.useState(true);
+  const [defaultIconOn, setDefaultIconOn] = React.useState(true);
+  const [customOn, setCustomOn] = React.useState(true);
+  const [customIconOn, setCustomIconOn] = React.useState(true);
+  const [disableAll, setDisableAll] = React.useState(false);
 
-  const switchValueNormalLabel = `switch ${
-    valueNormal === true ? 'on' : 'off'
-  }`;
-  const switchValueCustomlLabel = `switch ${
-    valueCustom === true ? 'on' : 'off'
-  }`;
+  const tertiaryTheme = React.useMemo(
+    () => ({
+      colors: {
+        primary: theme.colors.tertiary,
+        onPrimary: theme.colors.onTertiary,
+        primaryContainer: theme.colors.tertiaryContainer,
+        secondary: theme.colors.tertiary,
+      },
+    }),
+    [theme]
+  );
 
-  return Platform.OS === 'android' ? (
+  return (
     <ScreenWrapper style={styles.container}>
-      <TouchableRipple onPress={() => setNormalValue(!valueNormal)}>
-        <View style={styles.row}>
-          <Text>Normal {switchValueNormalLabel}</Text>
-          <View pointerEvents="none">
-            <Switch value={valueNormal} />
-          </View>
-        </View>
-      </TouchableRipple>
-      <TouchableRipple onPress={() => setCustomValue(!valueCustom)}>
-        <View style={styles.row}>
-          <Text>Custom {switchValueCustomlLabel}</Text>
-          <View pointerEvents="none">
-            <Switch value={valueCustom} color={Palette.tertiary50} />
-          </View>
-        </View>
-      </TouchableRipple>
-      <View style={styles.row}>
-        <Text>Switch on (disabled)</Text>
-        <Switch disabled value />
-      </View>
-      <View style={styles.row}>
-        <Text>Switch off (disabled)</Text>
-        <Switch disabled />
-      </View>
-    </ScreenWrapper>
-  ) : (
-    <ScreenWrapper style={styles.container}>
-      <View style={styles.row}>
-        <Text>Normal {switchValueNormalLabel}</Text>
+      <Row label="Default">
+        <Switch
+          value={defaultOn}
+          onValueChange={setDefaultOn}
+          disabled={disableAll}
+        />
+      </Row>
+
+      <Row label="Default with icon when on">
+        <Switch
+          value={defaultCheckedIconOn}
+          onValueChange={setDefaultCheckedIconOn}
+          checkedIcon="check"
+          disabled={disableAll}
+        />
+      </Row>
+
+      <Row label="Default with icon">
         <Switch
-          value={valueNormal}
-          onValueChange={() => setNormalValue(!valueNormal)}
+          value={defaultIconOn}
+          onValueChange={setDefaultIconOn}
+          checkedIcon="check"
+          uncheckedIcon="close"
+          disabled={disableAll}
         />
-      </View>
-      <View style={styles.row}>
-        <Text>Custom {switchValueCustomlLabel}</Text>
+      </Row>
+
+      <Row label="Custom (tertiary theme)">
         <Switch
-          value={valueCustom}
-          onValueChange={() => setCustomValue(!valueCustom)}
-          color={Palette.tertiary50}
+          value={customOn}
+          onValueChange={setCustomOn}
+          theme={tertiaryTheme}
+          disabled={disableAll}
         />
-      </View>
-      <View style={styles.row}>
-        <Text>Switch on (disabled)</Text>
-        <Switch value disabled />
-      </View>
-      <View style={styles.row}>
-        <Text>Switch off (disabled)</Text>
-        <Switch value={false} disabled />
-      </View>
+      </Row>
+
+      <Row label="Custom with icon">
+        <Switch
+          value={customIconOn}
+          onValueChange={setCustomIconOn}
+          checkedIcon="white-balance-sunny"
+          uncheckedIcon="moon-waning-crescent"
+          theme={tertiaryTheme}
+          disabled={disableAll}
+        />
+      </Row>
+
+      <View
+        style={[
+          styles.separator,
+          { backgroundColor: theme.colors.outlineVariant },
+        ]}
+      />
+
+      <Row label="Disable all switches">
+        <Switch value={disableAll} onValueChange={setDisableAll} />
+      </Row>
     </ScreenWrapper>
   );
 };
@@ -85,6 +115,16 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 16,
   },
+  right: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: 16,
+    marginVertical: 16,
+  },
 });
 
 export default SwitchExample;

jest/testSetup.js

@@ -8,6 +8,10 @@ jest.mock('react-native-worklets', () =>
   require('react-native-worklets/lib/module/mock')
 );
 
+jest.mock('react-native-reanimated', () =>
+  require('react-native-reanimated/mock')
+);
+
 jest.mock('@react-native-vector-icons/material-design-icons', () => {
   const React = require('react');
   const { Text } = require('react-native');