refactor(checkbox): unify platform-specific files (use Android impl)

Per maintainer feedback on #4955, replace the iOS-specific Checkbox
implementation with the Android one (which is closer to the MD3 spec)
and inline the unified implementation directly into Checkbox.tsx.

Changes:
- Checkbox.tsx: inline what was the Android implementation; render the
  same MD3-compliant control on both platforms. Drop the Platform.OS
  dispatching.
- CheckboxAndroid.tsx, CheckboxIOS.tsx: deleted.
- Checkbox/index.ts: `Checkbox.Android` and `Checkbox.IOS` are kept
  as back-compat aliases of `Checkbox` itself, so existing imports
  keep working with no breaking change.
- CheckboxItem.tsx: drop the `mode`-based branching; always render
  `<Checkbox />`. The `mode` prop is kept and marked deprecated.
- src/index.tsx: `CheckboxAndroidProps` and `CheckboxIOSProps` now
  alias the unified `Props` from Checkbox.tsx (no breaking change).
- Snapshot tests updated: the renderer now uses the unified container
  (36x36 ripple) and MaterialCommunityIcon glyphs on both platforms.

`getSelectionControlIOSColor` in utils.ts is intentionally left in
place because RadioButtonIOS still depends on it. A similar unification
for RadioButton can follow in a separate PR.

As a side benefit, callers using `<Checkbox.IOS uncheckedColor=...>`
will now see the prop applied (the old iOS variant silently dropped it),
addressing one of the API-parity gaps noted in #4949.

Author: fabriziocucci

src/components/Checkbox/Checkbox.tsx

@@ -1,12 +1,19 @@
 import * as React from 'react';
-import { GestureResponderEvent, Platform } from 'react-native';
+import {
+  Animated,
+  ColorValue,
+  GestureResponderEvent,
+  StyleSheet,
+  View,
+} from 'react-native';
 
-import CheckboxAndroid from './CheckboxAndroid';
-import CheckboxIOS from './CheckboxIOS';
+import { getAndroidSelectionControlColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { $RemoveChildren, ThemeProp } from '../../types';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
-export type Props = {
+export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * Status of checkbox.
    */
@@ -22,11 +29,11 @@ export type Props = {
   /**
    * Custom color for unchecked checkbox.
    */
-  uncheckedColor?: string;
+  uncheckedColor?: ColorValue;
   /**
    * Custom color for checkbox.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Whether the checkbox is in an error state. When true, the outline
    * (unchecked) and container (checked / indeterminate) use
@@ -44,9 +51,16 @@ export type Props = {
   testID?: string;
 };
 
+// From https://material.io/design/motion/speed.html#duration
+const ANIMATION_DURATION = 100;
+
 /**
  * Checkboxes allow the selection of multiple options from a set.
  *
+ * The component renders a single MD3-compliant control on both platforms,
+ * using the MaterialCommunityIcon glyphs that match the Material Design
+ * specification.
+ *
  * ## Usage
  * ```js
  * import * as React from 'react';
@@ -68,15 +82,131 @@ export type Props = {
  * export default MyComponent;
  * ```
  */
-const Checkbox = ({ theme: themeOverrides, ...props }: Props) => {
+const Checkbox = ({
+  status,
+  theme: themeOverrides,
+  disabled,
+  onPress,
+  testID,
+  error,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  return Platform.OS === 'ios' ? (
-    <CheckboxIOS {...props} theme={theme} />
-  ) : (
-    <CheckboxAndroid {...props} theme={theme} />
+  const { current: scaleAnim } = React.useRef<Animated.Value>(
+    new Animated.Value(1)
+  );
+  const isFirstRendering = React.useRef<boolean>(true);
+
+  const {
+    animation: { scale },
+  } = theme;
+
+  React.useEffect(() => {
+    // Do not run animation on very first rendering
+    if (isFirstRendering.current) {
+      isFirstRendering.current = false;
+      return;
+    }
+
+    const checked = status === 'checked';
+
+    Animated.sequence([
+      Animated.timing(scaleAnim, {
+        toValue: 0.85,
+        duration: checked ? ANIMATION_DURATION * scale : 0,
+        useNativeDriver: false,
+      }),
+      Animated.timing(scaleAnim, {
+        toValue: 1,
+        duration: checked
+          ? ANIMATION_DURATION * scale
+          : ANIMATION_DURATION * scale * 1.75,
+        useNativeDriver: false,
+      }),
+    ]).start();
+  }, [status, scaleAnim, scale]);
+
+  const checked = status === 'checked';
+  const indeterminate = status === 'indeterminate';
+
+  const { selectionControlColor, selectionControlOpacity } =
+    getAndroidSelectionControlColor({
+      theme,
+      disabled,
+      checked,
+      customColor: rest.color,
+      customUncheckedColor: rest.uncheckedColor,
+      error,
+    });
+
+  const borderWidth = scaleAnim.interpolate({
+    inputRange: [0.8, 1],
+    outputRange: [7, 0],
+  });
+
+  const icon = indeterminate
+    ? 'minus-box'
+    : checked
+    ? 'checkbox-marked'
+    : 'checkbox-blank-outline';
+
+  return (
+    <TouchableRipple
+      {...rest}
+      borderless
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ disabled, checked }}
+      accessibilityLiveRegion="polite"
+      style={styles.container}
+      testID={testID}
+      theme={theme}
+    >
+      <Animated.View
+        style={{
+          transform: [{ scale: scaleAnim }],
+          opacity: selectionControlOpacity,
+        }}
+      >
+        <MaterialCommunityIcon
+          allowFontScaling={false}
+          name={icon}
+          size={24}
+          color={selectionControlColor}
+          direction="ltr"
+        />
+        <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
+          <Animated.View
+            style={[
+              styles.fill,
+              { borderColor: selectionControlColor },
+              { borderWidth },
+            ]}
+          />
+        </View>
+      </Animated.View>
+    </TouchableRipple>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 18,
+    width: 36,
+    height: 36,
+    padding: 6,
+  },
+  fillContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fill: {
+    height: 14,
+    width: 14,
+  },
+});
+
 export default Checkbox;
 
 // @component-docs ignore-next-line