feat: add mode prop to Checkbox.Item component (#2375)

example/src/ExampleList.tsx

@@ -13,6 +13,7 @@ import BottomNavigationExample from './Examples/BottomNavigationExample';
 import ButtonExample from './Examples/ButtonExample';
 import CardExample from './Examples/CardExample';
 import CheckboxExample from './Examples/CheckboxExample';
+import CheckboxItemExample from './Examples/CheckboxItemExample';
 import ChipExample from './Examples/ChipExample';
 import DataTableExample from './Examples/DataTableExample';
 import DialogExample from './Examples/DialogExample';
@@ -49,6 +50,7 @@ export const examples: Record<
   button: ButtonExample,
   card: CardExample,
   checkbox: CheckboxExample,
+  checkboxItem: CheckboxItemExample,
   chip: ChipExample,
   dataTable: DataTableExample,
   dialog: DialogExample,

example/src/Examples/CheckboxItemExample.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Checkbox, Colors, useTheme } from 'react-native-paper';
+
+const CheckboxExample = () => {
+  const [checkedDefault, setCheckedDefault] = React.useState<boolean>(true);
+  const [checkedAndroid, setCheckedAndroid] = React.useState<boolean>(true);
+  const [checkedIOS, setCheckedIOS] = React.useState<boolean>(true);
+  const {
+    colors: { background },
+  } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: background,
+        },
+      ]}
+    >
+      <Checkbox.Item
+        label="Default (will look like whatever system this is running on)"
+        status={checkedDefault ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedDefault(!checkedDefault)}
+      />
+      <Checkbox.Item
+        label="Android"
+        mode="android"
+        status={checkedAndroid ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedAndroid(!checkedAndroid)}
+      />
+      <Checkbox.Item
+        label="iOS"
+        mode="ios"
+        status={checkedIOS ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedIOS(!checkedIOS)}
+      />
+    </View>
+  );
+};
+
+CheckboxExample.title = 'Checkbox Item';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.white,
+    paddingVertical: 8,
+  },
+});
+
+export default CheckboxExample;

src/components/Checkbox/CheckboxItem.tsx

@@ -9,6 +9,8 @@ import {
 } from 'react-native';
 
 import CheckBox from './Checkbox';
+import CheckboxAndroid from './CheckboxAndroid';
+import CheckboxIOS from './CheckboxIOS';
 import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { withTheme } from '../../core/theming';
@@ -54,6 +56,11 @@ type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * Whether `<Checkbox.Android />` or `<Checkbox.IOS />` should be used.
+   * Left undefined `<Checkbox />` will be used.
+   */
+  mode?: 'android' | 'ios';
 };
 
 /**
@@ -83,17 +90,33 @@ const CheckboxItem = ({
   labelStyle,
   theme,
   testID,
+  mode,
   ...props
-}: Props) => (
-  <TouchableRipple onPress={onPress} testID={testID}>
-    <View style={[styles.container, style]} pointerEvents="none">
-      <Text style={[styles.label, { color: theme.colors.primary }, labelStyle]}>
-        {label}
-      </Text>
-      <CheckBox status={status} theme={theme} {...props}></CheckBox>
-    </View>
-  </TouchableRipple>
-);
+}: Props) => {
+  const checkboxProps = { ...props, status, theme };
+  let checkbox;
+
+  if (mode === 'android') {
+    checkbox = <CheckboxAndroid {...checkboxProps} />;
+  } else if (mode === 'ios') {
+    checkbox = <CheckboxIOS {...checkboxProps} />;
+  } else {
+    checkbox = <CheckBox {...checkboxProps} />;
+  }
+
+  return (
+    <TouchableRipple onPress={onPress} testID={testID}>
+      <View style={[styles.container, style]} pointerEvents="none">
+        <Text
+          style={[styles.label, { color: theme.colors.primary }, labelStyle]}
+        >
+          {label}
+        </Text>
+        {checkbox}
+      </View>
+    </TouchableRipple>
+  );
+};
 
 CheckboxItem.displayName = 'Checkbox.Item';
 

src/components/__tests__/Checkbox/CheckboxItem.test.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+import renderer from 'react-test-renderer';
+import CheckboxItem from '../../Checkbox/CheckboxItem';
+
+it('renders unchecked', () => {
+  const tree = renderer
+    .create(<CheckboxItem status="unchecked" label="Unchecked Button" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('can render the iOS checkbox on different platforms', () => {
+  Platform.OS = 'android';
+  const tree = renderer
+    .create(<CheckboxItem status="unchecked" label="iOS Checkbox" mode="ios" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('can render the Android checkbox on different platforms', () => {
+  Platform.OS = 'ios';
+  const tree = renderer
+    .create(
+      <CheckboxItem status="unchecked" label="iOS Checkbox" mode="android" />
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});