@oneplatformdev/react-native-uikit 1.2.0 → 1.2.1

package/README.md

@@ -313,6 +313,8 @@ Both are controlled: pass `value`/`onValueChange` to `Switch` or `checked`/`onVa
 
 `Checkbox` defaults to a 22-unit slightly rounded square with a built-in checkmark. Override `size`, state colors, `borderWidth`, and `iconSize`/`iconColor`. Use `shape="circle"` for a radius derived from its size, or `shape="square"` with `borderRadius` (including `0`) for custom corners. Supply an `icon` node to replace the built-in indicator; the consumer owns that node's size and color.
 
+Use `interactive={false}` when Checkbox is only a visual indicator inside another pressable row. It renders a non-interactive View, does not handle touches, and leaves checked-state accessibility to the parent row. The default remains interactive.
+
 Owned source is available through `npx @oneplatformdev/react-native-uikit add switch` and `npx @oneplatformdev/react-native-uikit add checkbox`. Both are standalone components; Switch uses the existing `react-native-reanimated` peer.
 
 ## PhotoPreview and EmptyListView

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/react-native-uikit",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "bin": {

package/src/components/Checkbox/types/types.ts

@@ -4,6 +4,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 export interface CheckboxProps {
     checked: boolean;
     onValueChange?: (checked: boolean) => void;
+    interactive?: boolean;
     disabled?: boolean;
     size?: number;
     shape?: 'square' | 'circle';

package/src/components/Checkbox/ui/Checkbox.tsx

@@ -8,6 +8,7 @@ import type { CheckboxProps } from '../types/types';
 export const Checkbox = ({
     checked,
     onValueChange,
+    interactive = true,
     disabled = false,
     size = 22,
     shape = 'square',
@@ -47,8 +48,29 @@ export const Checkbox = ({
         disabledBackgroundColor, disabledBorderColor, iconSize, iconColor,
     ]);
     const onPress = useCallback(() => {
-        if (!disabled) onValueChange?.(!checked);
-    }, [checked, disabled, onValueChange]);
+        if (interactive && !disabled) onValueChange?.(!checked);
+    }, [checked, disabled, interactive, onValueChange]);
+
+    const content = checked ? (
+        <View pointerEvents="none">
+            {icon === undefined ? <View style={styles.indicator} />
+                : typeof icon === 'string' || typeof icon === 'number' ? <Text>{icon}</Text> : icon}
+        </View>
+    ) : null;
+
+    if (!interactive) {
+        return (
+            <View
+                pointerEvents="none"
+                accessible={false}
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+                style={[styles.container, style]}
+            >
+                {content}
+            </View>
+        );
+    }
 
     return (
         <Pressable
@@ -61,12 +83,7 @@ export const Checkbox = ({
             onPress={onPress}
             style={[styles.container, style]}
         >
-            {checked ? (
-                <View pointerEvents="none">
-                    {icon === undefined ? <View style={styles.indicator} />
-                        : typeof icon === 'string' || typeof icon === 'number' ? <Text>{icon}</Text> : icon}
-                </View>
-            ) : null}
+            {content}
         </Pressable>
     );
 };