Switched the CheckboxInput component to use Checkbox.Item to stay mor…

README.md

@@ -79,6 +79,7 @@ react-native run-android
 - Thom van den Akker [(@Thodor12)](https://github.com/Thodor12)
 - Carlos Loureiro [(@CarlosSLoureiro)](https://github.com/CarlosSLoureiro)
 - b. avianto [(@avianto)](https://github.com/avianto)
+- Ben Walton [(@himrocks33)](https://github.com/himrocks33)
 
 ## Contributing
 

example/src/App.tsx

@@ -21,7 +21,7 @@ export default function App() {
     list: [
       { _id: '1', value: 'MALE' },
       { _id: '2', value: 'FEMALE' },
-      { _id: '3', value: 'OTHERS' },
+      { _id: '3', value: 'OTHERS', disabled: true },
       {
         _id: '4',
         value:
@@ -43,6 +43,12 @@ export default function App() {
       { _id: '6', value: 'BLACK' },
       { _id: '7', value: 'WHITE' },
       { _id: '8', value: 'CYAN' },
+      { _id: '9', value: 'BLACK' },
+      { _id: '10', value: 'Test 1' },
+      { _id: '11', value: 'Test 2' },
+      { _id: '12', value: 'Test 3' },
+      { _id: '13', value: 'Test 4' },
+      { _id: '14', value: 'Test 5' },
     ],
     selectedList: [],
     error: '',
@@ -162,6 +168,7 @@ export default function App() {
         searchbarProps={{
           iconColor: 'red',
         }}
+        limit={2}
       />
       <PaperButton
         style={styles.button}

src/components/checkBox.tsx

@@ -1,40 +1,54 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Checkbox, Text } from 'react-native-paper';
+import { Checkbox } from 'react-native-paper';
 import type { PaperSelectCheckboxProps } from 'src/interface/checkbox.interface';
 
 interface CheckboxPropsFull extends PaperSelectCheckboxProps {
   isChecked: boolean;
   label: string;
+  onPress: () => void;
+  disabled?: boolean;
 }
 
 const CheckboxInput = ({
   isChecked,
   label,
   checkboxColor,
   checkboxLabelStyle,
+  checkboxLabelVariant,
   checkboxUncheckedColor,
+  checkboxMode,
+  disabled,
+  onPress,
 }: CheckboxPropsFull) => (
   <View style={styles.container}>
-    <Checkbox
-      uncheckedColor={checkboxUncheckedColor || '#000007'}
-      color={checkboxColor || 'blue'}
-      status={isChecked === true ? 'checked' : 'unchecked'}
+    <Checkbox.Item
+      uncheckedColor={checkboxUncheckedColor}
+      color={checkboxColor}
+      status={
+        disabled
+          ? 'indeterminate'
+          : isChecked === true
+          ? 'checked'
+          : 'unchecked'
+      }
+      label={label.trim()}
+      labelStyle={{ ...checkboxLabelStyle, textAlign: 'left' }}
+      labelVariant={checkboxLabelVariant}
+      mode={checkboxMode}
+      position={`leading`}
+      disabled={disabled}
+      onPress={disabled ? () => {} : onPress}
     />
-    <Text style={[styles.labelStyle, checkboxLabelStyle]}>{label.trim()}</Text>
   </View>
 );
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: 'column',
     flex: 1,
-    marginBottom: 1.5,
-  },
-  labelStyle: {
-    flexDirection: 'row',
-    flexShrink: 1,
+    justifyContent: 'center',
   },
 });
 

src/interface/checkbox.interface.ts

@@ -4,4 +4,6 @@ export interface PaperSelectCheckboxProps {
   checkboxColor?: string;
   checkboxUncheckedColor?: string;
   checkboxLabelStyle?: TextStyle;
+  checkboxLabelVariant?: any;
+  checkboxMode?: 'android' | 'ios';
 }

src/interface/paperSelect.interface.ts

@@ -7,6 +7,7 @@ import type { PaperSelectCheckboxProps } from './checkbox.interface';
 export interface ListItem {
   _id: string;
   value: string;
+  disabled?: boolean;
 }
 
 export interface SelectedItem {
@@ -47,6 +48,9 @@ export interface PaperSelectProps {
   textInputMode?: TextInputProps['mode'];
   theme?: ThemeProp;
   inputRef?: MutableRefObject<any>;
+  limit?: number | null;
+  limitError?: string;
+  limitErrorStyle?: TextStyle;
 
   // Localization props
   dialogTitle?: ReactNode;