@widergy/mobile-ui 1.18.1 → 1.18.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.18.2](https://github.com/widergy/mobile-ui/compare/v1.18.1...v1.18.2) (2024-08-19)
+
+
+### Bug Fixes
+
+* select V1 fixes ([#327](https://github.com/widergy/mobile-ui/issues/327)) ([94b61d6](https://github.com/widergy/mobile-ui/commit/94b61d6145e2a9477c50ad2a8a522734c5aa0307))
+
 ## [1.18.1](https://github.com/widergy/mobile-ui/compare/v1.18.0...v1.18.1) (2024-08-12)
 
 

package/lib/components/CheckList/components/CheckBoxRenderer/index.js

@@ -1,7 +1,5 @@
-/* eslint-disable react/forbid-prop-types */
 import React, { memo } from 'react';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { bool, string, func, number, shape, any } from 'prop-types';
+import { bool, string, func, number, object } from 'prop-types';
 
 import Checkbox from '../../../Checkbox/index';
 
@@ -48,18 +46,18 @@ const CheckBoxRenderer = ({
 };
 
 CheckBoxRenderer.propTypes = {
-  labelsContainerStyle: ViewPropTypes.style,
-  checkboxContainerStyle: ViewPropTypes.style,
+  labelsContainerStyle: object,
+  checkboxContainerStyle: object,
   index: number,
   checkedColor: string,
   reversed: bool,
-  item: shape(any),
-  alternateColors: ViewPropTypes.style,
+  item: object,
+  alternateColors: object,
   disabledStyleEnabled: bool,
-  disabledStyle: ViewPropTypes.style,
-  coloredStyle: ViewPropTypes.style,
+  disabledStyle: object,
+  coloredStyle: object,
   disabledCheckedColor: string,
-  textProps: shape(any),
+  textProps: object,
   isChecked: bool,
   handleChange: func
 };

package/lib/components/Label/propTypes.js

@@ -1,13 +1,10 @@
-/* eslint-disable react/forbid-foreign-prop-types */
-
-import { Text } from 'react-native';
-import { bool, oneOfType, string } from 'prop-types';
+import { bool, object, oneOfType, string } from 'prop-types';
 
 import { themeType } from '../../theming';
 
 export default {
   color: oneOfType([bool, string]),
-  textProps: Text.propTypes,
+  textProps: object,
   theme: themeType,
   allowFontScaling: bool,
   useMarkdown: bool

package/lib/components/UTBadge/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { number, oneOfType, string } from 'prop-types';
+import { number, object, oneOfType, string } from 'prop-types';
 import { View } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
@@ -31,7 +30,7 @@ UTBadge.defaultProps = DEFAULT_PROPS;
 UTBadge.propTypes = {
   children: oneOfType([string, number]),
   colorTheme: string,
-  style: ViewPropTypes.style
+  style: object
 };
 
 export default UTBadge;

package/lib/components/UTBaseInputField/README.md

@@ -1,25 +1,34 @@
-| Name                  | Type                                                           | Default                           | Description                                               |
-| --------------------- | -------------------------------------------------------------- | --------------------------------- | --------------------------------------------------------- |
-| alwaysShowPlaceholder | bool                                                           | false                             | Whether to always show the placeholder text.              |
-| disabled              | bool                                                           |                                   | Whether the input field is disabled.                      |
-| error                 | string                                                         |                                   | Error message to display.                                 |
-| id                    | oneOfType([number, string])                                    |                                   | Unique identifier for the input field.                    |
-| input                 | shape({ value: string.isRequired, onChange: func.isRequired }) | { value: '', onChange: () => {} } | Input object containing the value and onChange handler.   |
-| inputSize             | string                                                         | 'large'                           | Size of the input field. One of: `small`, `large`.        |
-| leftAdornments        | arrayOf(shape({ name: string, props: object }))                |                                   | Elements to display on the left side of the input field.  |
-| maxCount              | number                                                         |                                   | Maximum number of characters allowed.                     |
-| maxRows               | number                                                         |                                   | Maximum number of rows for multiline input.               |
-| onBlur                | func                                                           |                                   | Callback function to handle blur event.                   |
-| onFocus               | func                                                           |                                   | Callback function to handle focus event.                  |
-| onSubmitEditing       | func                                                           |                                   | Callback function to handle submit editing event.         |
-| placeholder           | string                                                         |                                   | Placeholder text for the input field.                     |
-| readOnly              | bool                                                           |                                   | Whether the input field is read-only.                     |
-| returnKeyType         | string                                                         |                                   | Type of return key to display on the keyboard.            |
-| rightAdornments       | arrayOf(shape({ name: string, props: object }))                |                                   | Elements to display on the right side of the input field. |
-| style                 | shape({ container: object, input: object, root: object })      | {}                                | Custom styles to apply to the component.                  |
-| type                  | string                                                         |                                   | Type of the input field (e.g., email, numeric, password). |
-| variant               | string                                                         | 'white'                           | Variant of the input field. One of: `white`, `gray`.      |
-| editable              | bool                                                           | true                              | Whether the input field is editable.                      |
+# UTBaseInputField
+
+## Description
+
+`UTBaseInputField` is a flexible and customizable input field component that supports various input types, adornments, and styles. It can be used to create text inputs with additional functionality such as icons, prefixes, suffixes, and action buttons.
+
+## Props
+
+| Name                  | Type                                                      | Default  | Description                                               |
+| --------------------- | --------------------------------------------------------- | -------- | --------------------------------------------------------- |
+| alwaysShowPlaceholder | bool                                                      | false    | Whether to always show the placeholder text.              |
+| disabled              | bool                                                      |          | Whether the input field is disabled.                      |
+| error                 | string                                                    |          | Error message to display.                                 |
+| id                    | oneOfType([number, string])                               |          | Unique identifier for the input field.                    |
+| value                 | string                                                    | ''       | The value of the input field.                             |
+| onChange              | func.isRequired                                           | () => {} | Callback function to handle change event.                 |
+| inputSize             | string                                                    | 'large'  | Size of the input field. One of: `small`, `large`.        |
+| leftAdornments        | arrayOf(shape({ name: string, props: object }))           |          | Elements to display on the left side of the input field.  |
+| maxCount              | number                                                    |          | Maximum number of characters allowed.                     |
+| maxRows               | number                                                    |          | Maximum number of rows for multiline input.               |
+| onBlur                | func                                                      |          | Callback function to handle blur event.                   |
+| onFocus               | func                                                      |          | Callback function to handle focus event.                  |
+| onSubmitEditing       | func                                                      |          | Callback function to handle submit editing event.         |
+| placeholder           | string                                                    |          | Placeholder text for the input field.                     |
+| readOnly              | bool                                                      |          | Whether the input field is read-only.                     |
+| returnKeyType         | string                                                    |          | Type of return key to display on the keyboard.            |
+| rightAdornments       | arrayOf(shape({ name: string, props: object }))           |          | Elements to display on the right side of the input field. |
+| style                 | shape({ container: object, input: object, root: object }) | {}       | Custom styles to apply to the component.                  |
+| type                  | string                                                    |          | Type of the input field (e.g., email, numeric, password). |
+| variant               | string                                                    | 'white'  | Variant of the input field. One of: `white`, `gray`.      |
+| editable              | bool                                                      | true     | Whether the input field is editable.                      |
 
 ## Input Types
 

package/lib/components/UTBaseInputField/components/ActionAdornment/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { bool, shape } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, object, shape } from 'prop-types';
 
 import UTButton from '../../../UTButton';
 import { propTypes as utbuttonProptypes } from '../../../UTButton/proptypes';
@@ -17,7 +16,11 @@ const ActionAdornment = ({ action, disabled, actionStyle }) => {
 
 ActionAdornment.propTypes = {
   action: shape(utbuttonProptypes),
-  actionStyle: shape({ object: ViewPropTypes.style }),
+  actionStyle: shape({
+    childrenContainer: object,
+    icon: object,
+    root: object
+  }),
   disabled: bool
 };
 

package/lib/components/UTBaseInputField/constants.js

@@ -10,6 +10,7 @@ export const TYPES = {
   NUMBER: 'number',
   NUMERIC: 'numeric',
   PASSWORD: 'password',
+  PASSWORD_NUMERIC: 'password_numeric',
   PHONE: 'phone'
 };
 
@@ -17,7 +18,8 @@ export const KEYBOARD_BY_TYPE = {
   [TYPES.EMAIL]: 'email-address',
   [TYPES.NUMBER]: 'number-pad',
   [TYPES.NUMERIC]: 'numeric',
-  [TYPES.PHONE]: 'phone-pad'
+  [TYPES.PHONE]: 'phone-pad',
+  [TYPES.PASSWORD_NUMERIC]: 'numeric'
 };
 
 export const COMPONENT_KEYS = {

package/lib/components/UTBaseInputField/index.js

@@ -25,12 +25,12 @@ const UTBaseInputField = forwardRef(
       editable,
       error,
       id,
-      input,
       inputSize,
       leftAdornments,
       maxLength,
       maxRows,
       onBlur,
+      onChange,
       onFocus,
       onSubmitEditing,
       placeholder,
@@ -40,11 +40,11 @@ const UTBaseInputField = forwardRef(
       showCharacterCount,
       style,
       type,
+      value,
       variant
     },
     ref
   ) => {
-    const { value, onChange } = input;
     const [displayValue, setDisplayValue] = useState(value);
     const [focused, setFocused] = useState(false);
     const inputWidthRef = useRef(null);
@@ -93,7 +93,7 @@ const UTBaseInputField = forwardRef(
     };
 
     const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = retrieveStyle({
-      disabled,
+      disabled: disabled && !readOnly,
       error,
       focused,
       inputSize,
@@ -112,10 +112,21 @@ const UTBaseInputField = forwardRef(
     useImperativeHandle(ref, () => ({
       truncate: () => {
         setDisplayValue(truncateText(value));
-      }
+      },
+      focus: () => {
+        if (inputRef.current) {
+          handleFocus();
+        }
+      },
+      blur: () => {
+        if (inputRef.current) {
+          handleBlur();
+        }
+      },
+      ...inputRef.current
     }));
 
-    const secureTextEntry = type === TYPES.PASSWORD;
+    const secureTextEntry = [TYPES.PASSWORD, TYPES.PASSWORD_NUMERIC].includes(type);
     const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
     const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
 
@@ -129,7 +140,7 @@ const UTBaseInputField = forwardRef(
             error={error}
             focused={focused}
             inputStyle={inputStyle}
-            key={element.name}
+            key={element.key || element.name}
             {...element.props}
           />
         ) : null;

package/lib/components/UTBaseInputField/proptypes.js

@@ -1,19 +1,16 @@
-import { bool, func, number, string, arrayOf, shape, oneOfType } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { arrayOf, bool, func, number, object, oneOfType, shape, string } from 'prop-types';
 
 import { VARIANT, SIZES } from './constants';
 
 export const defaultProps = {
   alwaysShowPlaceholder: false,
   editable: true,
-  maxRows: 1,
-  input: {
-    value: [],
-    onChange: () => {}
-  },
   inputSize: SIZES.LARGE,
   leftAdornments: [],
+  maxRows: 1,
+  onChange: () => {},
   rightAdornments: [],
+  value: null,
   variant: VARIANT.WHITE
 };
 
@@ -24,17 +21,10 @@ export const propTypes = {
   editable: bool,
   error: oneOfType([bool, string]),
   id: oneOfType([number, string]),
-  input: shape({
-    value: oneOfType([string, number]),
-    onChange: func
-  }),
+  value: oneOfType([string, number]),
+  onChange: func,
   inputSize: string,
-  leftAdornments: arrayOf(
-    shape({
-      name: string.isRequired,
-      props: shape({})
-    })
-  ),
+  leftAdornments: arrayOf(shape({ name: string.isRequired, props: shape({}) })),
   maxLength: number,
   maxRows: number,
   onBlur: func,
@@ -51,9 +41,9 @@ export const propTypes = {
   ),
   showCharacterCount: bool,
   style: shape({
-    container: ViewPropTypes.style,
-    input: ViewPropTypes.style,
-    root: ViewPropTypes.style
+    container: object,
+    input: object,
+    root: object
   }),
   type: string,
   variant: string

package/lib/components/UTBaseInputField/theme.js

@@ -81,8 +81,7 @@ const baseTextInputTheme = theme => ({
     columnGap: CONTAINER.ROW_GAP,
     flex: 1,
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%'
+    justifyContent: 'space-between'
   },
   textLengthRow: {
     flexDirection: 'row',

package/lib/components/UTButton/proptypes.js

@@ -1,5 +1,4 @@
-import { bool, func, elementType, string, shape, number } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, elementType, func, number, object, shape, string } from 'prop-types';
 
 import { ICON_PLACEMENTS, SIZES } from './constants';
 
@@ -22,9 +21,9 @@ export const propTypes = {
   onPress: func,
   size: string,
   style: shape({
-    childrenContainer: ViewPropTypes.style,
-    icon: ViewPropTypes.style,
-    root: ViewPropTypes.style
+    childrenContainer: object,
+    icon: object,
+    root: object
   }),
   variant: string
 };

package/lib/components/UTCBUInput/index.js

@@ -1,12 +1,11 @@
-/* eslint-disable camelcase */
 import React from 'react';
-import { shape, func, any, elementType, oneOfType, number, string } from 'prop-types';
+import { shape, func, object, elementType, oneOfType, number, string } from 'prop-types';
 
 import UTTextInput from '../UTTextInput';
 
-const UTCBUInput = ({ input, configuration, ...props }) => {
+const UTCBUInput = ({ input, field, ...props }) => {
   const { onChange, value, onBlur } = input;
-  const { entities, cbu_number_key, cbu_entity_key } = configuration;
+  const { entities, cbu_number_key: cbuNumberKey, cbu_entity_key: cbuEntityKey } = field?.configuration || {};
 
   const findEntity = inputNumber => {
     const entityObject = entities?.find(entity => new RegExp(entity.expression).test(inputNumber));
@@ -15,7 +14,7 @@ const UTCBUInput = ({ input, configuration, ...props }) => {
 
   const handleOnChange = inputValue => {
     const newValue = inputValue
-      ? { [cbu_number_key]: inputValue, [cbu_entity_key]: findEntity(inputValue) }
+      ? { [cbuNumberKey]: inputValue, [cbuEntityKey]: findEntity(inputValue) }
       : null;
     onChange(newValue);
   };
@@ -28,20 +27,20 @@ const UTCBUInput = ({ input, configuration, ...props }) => {
   return (
     <UTTextInput
       {...props}
-      value={value?.[cbu_number_key]}
-      captionLabel={value?.[cbu_entity_key]}
-      onChange={handleOnChange}
-      onBlur={handleOnBlur}
+      helpText={value?.[cbuEntityKey]}
       maxLength={22}
+      onBlur={handleOnBlur}
+      onChange={handleOnChange}
+      value={value?.[cbuNumberKey]}
+      version="V1"
     />
   );
 };
 
 UTCBUInput.propTypes = {
+  field: shape({ configuration: object }),
   input: shape({ onChange: func.isRequired, value: oneOfType([number, string]) }),
-  InputComponent: elementType,
-  // eslint-disable-next-line react/forbid-prop-types
-  configuration: any
+  InputComponent: elementType
 };
 
 export default UTCBUInput;

package/lib/components/UTCheckBox/README.md

@@ -6,19 +6,19 @@
 
 ## Props
 
-| Name          | Type   | Default | Description                                             |
-| ------------- | ------ | ------- | ------------------------------------------------------- |
-| checked       | bool   | false   | Indicates if the checkbox is checked.                   |
-| disabled      | bool   | false   | Disables the checkbox, making it unclickable.           |
-| indeterminate | bool   | false   | Indicates if the checkbox is in an indeterminate state. |
-| isSimple      | bool   | false   | **Deprecated**: Use standard checkboxes instead.        |
-| label         | string |         | Label to display next to the checkbox.                  |
-| onPress       | func   |         | Function to call when the checkbox is pressed.          |
-| required      | bool   | false   | Indicates if the checkbox is required.                  |
-| reversed      | bool   | false   | If true, reverses the order of label and checkbox.      |
-| spacing       | string | large   | If "small", reduces the column gap from 16 to 8.        |
-| style         | shape  | {}      | Custom styles to apply to the checkbox container.       |
-| variant       | string |         | The variant to use for styling the checkbox.            |
+| Name          | Type   | Default | Description                                                                 |
+| ------------- | ------ | ------- | --------------------------------------------------------------------------- |
+| checked       | bool   | false   | Indicates if the checkbox is checked.                                       |
+| disabled      | bool   | false   | Disables the checkbox, making it unclickable.                               |
+| indeterminate | bool   | false   | Indicates if the checkbox is in an indeterminate state.                     |
+| isSimple      | bool   | false   | **Deprecated**: Use standard checkboxes instead.                            |
+| onPress       | func   |         | Function to call when the checkbox is pressed.                              |
+| required      | bool   | false   | Indicates if the checkbox is required.                                      |
+| reversed      | bool   | false   | If true, reverses the order of title and checkbox.                          |
+| spacing       | string | large   | If "small", reduces the column gap from 16 to 8.                            |
+| style         | shape  | {}      | Custom styles to apply to the checkbox container. Can contain root or title |
+| title         | string |         | Title to display next to the checkbox.                                      |
+| variant       | string |         | The variant to use for styling the checkbox.                                |
 
 ## Usage
 
@@ -31,7 +31,7 @@ import UTCheckBox from './UTCheckBox';
 const Example = () => {
   const [checked, setChecked] = React.useState(false);
 
-  return <UTCheckBox checked={checked} label="Check me" onPress={() => setChecked(!checked)} />;
+  return <UTCheckBox checked={checked} title="Check me" onPress={() => setChecked(!checked)} />;
 };
 
 export default Example;

package/lib/components/UTCheckBox/index.js

@@ -13,20 +13,20 @@ import styles from './styles';
 const UTCheckBox = ({
   checked,
   disabled,
-  isSimple,
   indeterminate,
-  label,
+  isSimple,
   onPress,
   required,
   reversed,
   spacing,
   style,
+  title,
   variant
 }) => {
   const theme = useTheme();
   const [pressed, setPressed] = useState(false);
 
-  const { containerStyles, iconContainerStyles, boxStyles, pressableStyles } = useMemo(
+  const { containerStyles, iconContainerStyles, boxStyles, pressableStyles, titleStyles } = useMemo(
     () =>
       retrieveStyle({
         checked,
@@ -60,7 +60,12 @@ const UTCheckBox = ({
     >
       <View style={containerStyles}>
         {isSimple ? (
-          <UTIcon name="IconCheck" shade="04" colorTheme="accent" style={!checked && styles.hidden} />
+          <UTIcon
+            name="IconCheck"
+            shade="04"
+            colorTheme="accent"
+            style={checked ? undefined : styles.hidden}
+          />
         ) : (
           <View style={boxStyles}>
             <View style={iconContainerStyles}>
@@ -68,8 +73,8 @@ const UTCheckBox = ({
             </View>
           </View>
         )}
-        <UTFieldLabel required={required} colorTheme={checked && 'accent'} shade={checked && '05'}>
-          {label}
+        <UTFieldLabel colorTheme={checked ? 'accent' : 'dark'} required={required} style={titleStyles}>
+          {title}
         </UTFieldLabel>
       </View>
     </Pressable>

package/lib/components/UTCheckBox/proptypes.js

@@ -1,5 +1,4 @@
-import { bool, func, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, func, object, string } from 'prop-types';
 
 import { SPACING } from './constants';
 
@@ -17,11 +16,11 @@ export const propTypes = {
   disabled: bool,
   indeterminate: bool,
   isSimple: bool,
-  label: string,
   onPress: func,
   required: bool,
   reversed: bool,
   spacing: string,
-  style: ViewPropTypes.style,
+  style: object,
+  title: string,
   variant: string
 };

package/lib/components/UTCheckBox/theme.js

@@ -21,6 +21,9 @@ const baseCheckBoxTheme = theme => ({
     borderRadius: 25,
     overflow: 'hidden',
     padding: 6
+  },
+  title: {
+    maxWidth: '80%'
   }
 });
 
@@ -109,18 +112,22 @@ export const retrieveStyle = ({
   });
 
   return {
+    boxStyles: {
+      ...baseThemeStyles.box,
+      ...box
+    },
     containerStyles: {
       ...baseThemeStyles.container,
       ...container,
-      ...style
+      ...style.root
     },
     iconContainerStyles: {
       ...baseThemeStyles.iconContainer,
       ...iconContainer
     },
-    boxStyles: {
-      ...baseThemeStyles.box,
-      ...box
+    titleStyles: {
+      ...baseThemeStyles.title,
+      ...style.title
     },
     pressableStyles: pressable
   };

package/lib/components/UTCheckList/README.MD

@@ -6,29 +6,21 @@
 
 ## Props
 
-| Name              | Type   | Default | Description                                                                                                            |
-| ----------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------- |
-| error             | string |         | Error message to display.                                                                                              |
-| input             | shape  |         | Input configuration object containing `value` and `onChange`.                                                          |
-| label             | string |         | Label for the checklist.                                                                                               |
-| options           | array  |         | Array of options to be displayed as checkboxes. Each option is an object with `label` and `value`.                     |
-| required          | bool   | false   | Indicates if the checklist is required.                                                                                |
-| reversed          | bool   | false   | If true, reverses the order of label and checkbox.                                                                     |
-| selectAllLabel    | string |         | Label for the "Select All" checkbox.                                                                                   |
-| showSelectAll     | bool   | true    | Determines whether to show the "Select All" checkbox.                                                                  |
-| style             | shape  | {}      | Custom styles to apply to the checklist. Can contain `root`, `header`, `checkboxesContainer`, `item`, and `selectAll`. |
-| variant           | string |         | Variant style for the checklist.                                                                                       |
-| horizontalSpacing | string | large   | Spacing between the checkbox and the label horizontally.                                                               |
-| verticalSpacing   | string | large   | Spacing between the checkbox items vertically.                                                                         |
-
-### Input Object
-
-The `input` prop is an object that should contain the following keys:
-
-| Name     | Type            | Description                                  |
-| -------- | --------------- | -------------------------------------------- |
-| value    | arrayOf(string) | Array of selected values.                    |
-| onChange | func            | Function to call when the selection changes. |
+| Name              | Type            | Default | Description                                                                                                            |
+| ----------------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
+| error             | string          |         | Error message to display.                                                                                              |
+| horizontalSpacing | string          | large   | Spacing between the checkbox and the title horizontally.                                                               |
+| title             | string          |         | Title for the checklist.                                                                                               |
+| onChange          | func.isRequired |         | Function to call when the selection changes.                                                                           |
+| options           | array           |         | Array of options to be displayed as checkboxes. Each option is an object with `label` and `value`.                     |
+| required          | bool            | false   | Indicates if the checklist is required.                                                                                |
+| reversed          | bool            | false   | If true, reverses the order of title and checkbox.                                                                     |
+| selectAllLabel    | string          |         | Label for the "Select All" checkbox.                                                                                   |
+| showSelectAll     | bool            | true    | Determines whether to show the "Select All" checkbox.                                                                  |
+| style             | shape           | {}      | Custom styles to apply to the checklist. Can contain `root`, `header`, `checkboxesContainer`, `item`, and `selectAll`. |
+| value             | arrayOf(string) | []      | Array of selected values.                                                                                              |
+| variant           | string          |         | Variant style for the checklist.                                                                                       |
+| verticalSpacing   | string          | large   | Spacing between the checkbox items vertically.                                                                         |
 
 ### Option Object
 
@@ -60,15 +52,13 @@ const Example = () => {
 
   return (
     <UTCheckList
-      label="Select Options"
+      error="Please select at least one option"
+      title="Select Options"
+      onChange={setSelectedOptions}
       options={options}
-      input={{
-        value: selectedOptions,
-        onChange: setSelectedOptions
-      }}
-      selectAllLabel="Select All"
       required
-      error="Please select at least one option"
+      selectAllLabel="Select All"
+      value={selectedOptions}
     />
   );
 };
@@ -85,7 +75,7 @@ import UTCheckBox from './UTCheckBox';
 const customStyles = {
   root: { padding: 10 },
   iconContainer: { backgroundColor: 'lightgrey' },
-  label: { color: 'blue' }
+  title: { color: 'blue' }
 };
 
 const Example = () => {
@@ -94,7 +84,7 @@ const Example = () => {
   return (
     <UTCheckBox
       checked={checked}
-      label="Check me"
+      title="Check me"
       onPress={() => setChecked(!checked)}
       style={customStyles}
     />