@chem-po/react-native 0.0.29 → 0.0.31

package/lib/typescript/components/form/input/hooks/useInputStyles.d.ts

@@ -12,18 +12,15 @@ export declare const inputStyles: {
         borderRadius: number;
     };
     inputSmall: {
-        paddingVertical: number;
-        paddingHorizontal: number;
+        padding: number;
         borderRadius: number;
     };
     inputMedium: {
-        paddingVertical: number;
-        paddingHorizontal: number;
+        padding: number;
         borderRadius: number;
     };
     inputLarge: {
-        paddingVertical: number;
-        paddingHorizontal: number;
+        padding: number;
         borderRadius: number;
     };
     inputTextSmall: {

package/lib/typescript/components/form/input/hooks/useInputStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/hooks/useInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAGzC,OAAO,EAAE,SAAS,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1E,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDtB,CAAA;AAsCF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACtC;AACD,eAAO,MAAM,cAAc,GACzB,YAAY,OAAO,GAAG,SAAS,EAC/B,MAAM,SAAS,GAAG,SAAS,EAC3B,WAAU,SAAgB,KACzB,cAoBF,CAAA"}
+{"version":3,"file":"useInputStyles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/hooks/useInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAGzC,OAAO,EAAE,SAAS,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1E,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CtB,CAAA;AAsCF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACtC;AACD,eAAO,MAAM,cAAc,GACzB,YAAY,OAAO,GAAG,SAAS,EAC/B,MAAM,SAAS,GAAG,SAAS,EAC3B,WAAU,SAAgB,KACzB,cA0BF,CAAA"}

package/lib/typescript/components/form/input/multipleSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/multipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA2B,MAAM,eAAe,CAAA;AACjE,OAAO,EACL,mBAAmB,EAQpB,MAAM,gBAAgB,CAAA;AAEvB,OAAO,KAAK,EAAE,EAGZ,iBAAiB,EAIlB,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,uBAAuB,GAAI,sBAGrC,iBAAiB,CAAC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,CAAC,sBAQnE,CAAA;AAwID,eAAO,MAAM,uBAAuB,kGAA0C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/multipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA2B,MAAM,eAAe,CAAA;AACjE,OAAO,EACL,mBAAmB,EAQpB,MAAM,gBAAgB,CAAA;AAEvB,OAAO,KAAK,EAAE,EAGZ,iBAAiB,EAIlB,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,uBAAuB,GAAI,sBAGrC,iBAAiB,CAAC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,CAAC,sBAQnE,CAAA;AAoJD,eAAO,MAAM,uBAAuB,kGAA0C,CAAA"}

package/lib/typescript/components/form/input/socialMedia/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/socialMedia/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAoB,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAQN,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAiExC,eAAO,MAAM,oBAAoB,+FA+EhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/socialMedia/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAoB,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAQN,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAiExC,eAAO,MAAM,oBAAoB,+FA+EhC,CAAA"}

package/lib/typescript/components/form/input/text/AutoResizeTextarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoResizeTextarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/AutoResizeTextarea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAIpE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,kBAAkB,kFAuB9B,CAAA"}
+{"version":3,"file":"AutoResizeTextarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/AutoResizeTextarea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAIpE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,kBAAkB,kFAoB9B,CAAA"}

package/lib/typescript/components/form/input/text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAA;AAE7E,OAAO,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,aAAa,wFA+DzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAA;AAE7E,OAAO,KAA4D,MAAM,OAAO,CAAA;AAGhF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,aAAa,wFAgEzB,CAAA"}

package/lib/typescript/components/form/input/text/textarea.d.ts

@@ -1,6 +1,6 @@
-import { InputRef } from '@chem-po/core';
 import { TextField } from '@chem-po/react';
 import React from 'react';
+import { TextInput } from 'react-native';
 import { FieldProps } from '../../types';
-export declare const TextAreaComponent: React.ForwardRefExoticComponent<FieldProps<TextField> & React.RefAttributes<InputRef>>;
+export declare const TextAreaComponent: React.ForwardRefExoticComponent<FieldProps<TextField> & React.RefAttributes<TextInput>>;
 //# sourceMappingURL=textarea.d.ts.map

package/lib/typescript/components/form/input/text/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAA;AAC7E,OAAO,KAAkD,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,iBAAiB,wFAiC7B,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAA;AAC7E,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,iBAAiB,yFAsB7B,CAAA"}

package/lib/typescript/components/form/input/text/useWebAutoResize.d.ts

@@ -1,8 +1,7 @@
 import { StyleProp, TextStyle } from 'react-native';
 export declare const useWebAutoResize: (onChangeText: ((e: string) => void) | undefined, style: StyleProp<TextStyle> | undefined) => {
-    getWebTextHeight: (text: string, spanRef: React.RefObject<HTMLSpanElement | null>) => number | null;
     handleChange: ((e: string) => void) | undefined;
-    height: number;
-    setHeight: import("react").Dispatch<import("react").SetStateAction<number>>;
+    height: number | "auto";
+    setHeight: import("react").Dispatch<import("react").SetStateAction<number | "auto">>;
 };
 //# sourceMappingURL=useWebAutoResize.d.ts.map

package/lib/typescript/components/form/input/text/useWebAutoResize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWebAutoResize.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/useWebAutoResize.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,SAAS,EAAc,SAAS,EAAE,MAAM,cAAc,CAAA;AAmCzE,eAAO,MAAM,gBAAgB,GAC3B,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,EAC/C,OAAO,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS;6BAlCT,MAAM,WAAW,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC;uBAiCnE,MAAM,KAAK,IAAI;;;CAkCnC,CAAA"}
+{"version":3,"file":"useWebAutoResize.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/useWebAutoResize.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,SAAS,EAAc,SAAS,EAAE,MAAM,cAAc,CAAA;AAmCzE,eAAO,MAAM,gBAAgB,GAC3B,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,EAC/C,OAAO,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS;uBADpB,MAAM,KAAK,IAAI;;;CAmCnC,CAAA"}

package/lib/typescript/components/form/input/time/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/time/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAgB,MAAM,gBAAgB,CAAA;AAExD,OAAO,KAA6D,MAAM,OAAO,CAAA;AAIjF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAKxC,eAAO,MAAM,SAAS,wFA6FrB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/time/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAgB,MAAM,gBAAgB,CAAA;AAExD,OAAO,KAA6D,MAAM,OAAO,CAAA;AAKjF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAKxC,eAAO,MAAM,SAAS,wFA6FrB,CAAA"}

package/lib/typescript/components/form/view/file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/file.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAoChE,eAAO,MAAM,aAAa,GAAI,mDAM3B;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,sBAsBA,CAAA"}
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/file.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAA;AAC/D,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAmChE,eAAO,MAAM,aAAa,GAAI,mDAM3B;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,sBA2BA,CAAA"}

package/lib/typescript/components/form/view/index.d.ts

@@ -2,11 +2,12 @@ import { InputSize } from '@chem-po/core';
 import { Field } from '@chem-po/react';
 import React from 'react';
 import { ViewStyle } from 'react-native';
-export declare const FieldView: ({ field, value, noLabel, style, size, }: {
+export declare const FieldView: ({ field, value, noLabel, style, size, inEditable, }: {
     field: Field;
-    value: any;
+    value?: any;
     noLabel?: boolean;
     style?: ViewStyle;
     size?: InputSize;
+    inEditable?: boolean;
 }) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/form/view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,SAAS,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,KAAK,EAAe,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAmD1D,eAAO,MAAM,SAAS,GAAI,yCAMvB;IACD,KAAK,EAAE,KAAK,CAAA;IACZ,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,sBAyBA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,SAAS,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,KAAK,EAAoC,MAAM,gBAAgB,CAAA;AACxE,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAsD1D,eAAO,MAAM,SAAS,GAAI,qDAOvB;IACD,KAAK,EAAE,KAAK,CAAA;IACZ,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,sBAuCA,CAAA"}

package/lib/typescript/components/form/view/multipleSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multipleSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/multipleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAgB,MAAM,gBAAgB,CAAA;AAElE,OAAc,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AA+BvE,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,mBAAmB,EAAE,mDAMpE;IACD,KAAK,EAAE,CAAC,CAAA;IACR,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,QAkCA,CAAA"}
+{"version":3,"file":"multipleSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/multipleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAqC,MAAM,gBAAgB,CAAA;AAEvF,OAAc,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AA8BvE,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,mBAAmB,EAAE,mDAMpE;IACD,KAAK,EAAE,CAAC,CAAA;IACR,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,QAqCA,CAAA"}

package/lib/typescript/components/form/view/select.d.ts

@@ -3,11 +3,12 @@ import { SelectField } from '@chem-po/react';
 import React from 'react';
 import { ViewStyle } from 'react-native';
 export declare const DefaultRenderOption: <Value = string, Option extends BaseSelectOption<Value> = BaseSelectOption<Value>>({ option, }: RenderSelectOptionProps<Value, Option>) => React.JSX.Element;
-export declare const SelectFieldView: ({ field, value, noLabel, style, size: sizeProp, }: {
+export declare const SelectFieldView: ({ field, value, noLabel, style, size: sizeProp, inEditable, }: {
     field: SelectField;
     value: any;
     noLabel?: boolean;
     style?: ViewStyle;
     size?: InputSize;
+    inEditable?: boolean;
 }) => React.JSX.Element;
 //# sourceMappingURL=select.d.ts.map

package/lib/typescript/components/form/view/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AACpF,OAAO,EAAE,WAAW,EAAqC,MAAM,gBAAgB,CAAA;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAgBhE,eAAO,MAAM,mBAAmB,GAC9B,KAAK,GAAG,MAAM,EACd,MAAM,SAAS,gBAAgB,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,KAAK,CAAC,EAChE,aAEC,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAC,sBAExC,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,mDAM7B;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,sBAyBA,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AACpF,OAAO,EAAE,WAAW,EAAqC,MAAM,gBAAgB,CAAA;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAiBhE,eAAO,MAAM,mBAAmB,GAC9B,KAAK,GAAG,MAAM,EACd,MAAM,SAAS,gBAAgB,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,KAAK,CAAC,EAChE,aAEC,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAC,sBAMxC,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,+DAO7B;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,sBA2BA,CAAA"}

package/lib/typescript/components/form/view/styles.d.ts

@@ -7,8 +7,5 @@ export declare const inputViewStyles: {
     value: {
         opacity: number;
     };
-    valueEmpty: {
-        opacity: number;
-    };
 };
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/form/view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;;;;CAY1B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;CAS1B,CAAA"}

package/lib/typescript/components/image/ImageViewModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageViewModal.d.ts","sourceRoot":"","sources":["../../../../src/components/image/ImageViewModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAOxE,UAAU,mBAAmB;IAC3B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4OxD,CAAA"}
+{"version":3,"file":"ImageViewModal.d.ts","sourceRoot":"","sources":["../../../../src/components/image/ImageViewModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAYxE,UAAU,mBAAmB;IAC3B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4OxD,CAAA"}

package/lib/typescript/components/layout/CollapseHorizontal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export declare const CollapseHorizontal: ({ children, in: isIn, duration, style, }: {
+    children: React.ReactNode;
+    in: boolean;
+    duration?: number;
+    style?: StyleProp<ViewStyle>;
+}) => React.JSX.Element;
+//# sourceMappingURL=CollapseHorizontal.d.ts.map

package/lib/typescript/components/layout/CollapseHorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseHorizontal.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/CollapseHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAqB,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAA;AAQ5E,eAAO,MAAM,kBAAkB,GAAI,0CAKhC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,EAAE,EAAE,OAAO,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B,sBAwEA,CAAA"}

package/lib/typescript/components/loading/LoadingImage.d.ts

@@ -3,7 +3,10 @@ import { DimensionValue, ViewStyle } from 'react-native';
 export interface LoadingImageProps {
     src?: string | null;
     loadingOverride?: boolean;
-    onLoad?: (e: any) => void;
+    onLoad?: (dims: {
+        width: number;
+        height: number;
+    }) => void;
     filename?: string;
     fileType?: string;
     withFullView?: boolean;

package/lib/typescript/components/loading/LoadingImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingImage.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/LoadingImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,cAAc,EAA6C,SAAS,EAAE,MAAM,cAAc,CAAA;AAInG,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAKD,eAAO,MAAM,YAAY,GAAI,yHAY1B,iBAAiB,sBA4FnB,CAAA"}
+{"version":3,"file":"LoadingImage.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/LoadingImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,cAAc,EAA2B,SAAS,EAAE,MAAM,cAAc,CAAA;AAKjF,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAKD,eAAO,MAAM,YAAY,GAAI,yHAY1B,iBAAiB,sBA2FnB,CAAA"}

package/lib/typescript/components/theme/colorMode/DarkModeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkModeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/theme/colorMode/DarkModeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,cAAc,yBAmB1B,CAAA;AAED,eAAO,MAAM,sBAAsB,yBAIlC,CAAA"}
+{"version":3,"file":"DarkModeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/theme/colorMode/DarkModeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,cAAc,yBAmB1B,CAAA;AAED,eAAO,MAAM,sBAAsB,yBAIlC,CAAA"}

package/lib/typescript/index.d.ts

@@ -3,4 +3,5 @@ export * from './constants';
 export * from './contexts';
 export * from './hooks';
 export * from './store';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/lib/typescript/types/forms.d.ts

@@ -0,0 +1,5 @@
+import { BaseCustomInput, BaseCustomInputProps } from '@chem-po/react';
+import { TextStyle, ViewStyle } from 'react-native';
+export type CustomInput<Value, InputStyle = TextStyle> = BaseCustomInput<Value, ViewStyle, InputStyle>;
+export type CustomInputProps<Value, InputStyle = TextStyle> = BaseCustomInputProps<Value, ViewStyle, InputStyle>;
+//# sourceMappingURL=forms.d.ts.map

package/lib/typescript/types/forms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../../../src/types/forms.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACtE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEnD,MAAM,MAAM,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,IAAI,eAAe,CACtE,KAAK,EACL,SAAS,EACT,UAAU,CACX,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,IAAI,oBAAoB,CAChF,KAAK,EACL,SAAS,EACT,UAAU,CACX,CAAA"}

package/lib/typescript/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './forms';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@chem-po/react-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -51,8 +51,8 @@
     "react-native-paper-dates": "^0.22.42",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.29",
-    "@chem-po/react": "0.0.29"
+    "@chem-po/core": "0.0.31",
+    "@chem-po/react": "0.0.31"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -68,7 +68,7 @@
     "vite": "^6.2.2"
   },
   "peerDependencies": {
-    "expo": "~53.0.11",
+    "expo": "~53.0.22",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "0.79.4"

package/src/components/button/DeleteButton.tsx

@@ -1,16 +1,8 @@
 import { useToast } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import {
-  ActivityIndicator,
-  Animated,
-  Modal,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native'
+import { ActivityIndicator, Animated, Modal, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { Txt } from '../text/Txt'
 
 const defaultAlertBodyText = "Are you sure? You can't undo this action afterwards."
@@ -45,19 +37,16 @@ export const DeleteConfirmAlert = ({
           </Txt>
           {typeof body === 'string' ? <Txt style={styles.alertBody}>{body}</Txt> : body}
           <View style={styles.buttonContainer}>
-            <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+            <Pressable style={styles.cancelButton} onPress={onCancel}>
               <Txt style={styles.cancelText}>Cancel</Txt>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={styles.confirmButton}
-              onPress={onConfirm}
-              disabled={actionLoading}>
+            </Pressable>
+            <Pressable style={styles.confirmButton} onPress={onConfirm} disabled={actionLoading}>
               {actionLoading ? (
                 <ActivityIndicator color="#fff" />
               ) : (
                 <Txt style={[styles.buttonText, styles.confirmButtonText]}>{actionName}</Txt>
               )}
-            </TouchableOpacity>
+            </Pressable>
           </View>
         </View>
       </View>
@@ -132,10 +121,9 @@ export const DeleteButton: React.FC<{
   return (
     <>
       {text ? (
-        <TouchableOpacity
+        <Pressable
           style={[styles.button, style]}
-          onPress={e => {
-            e.stopPropagation()
+          onPress={() => {
             if (noConfirm) handleDelete()
             else setConfirmActive(true)
           }}
@@ -150,12 +138,11 @@ export const DeleteButton: React.FC<{
               <ActivityIndicator color="#ff0000" size="small" />
             </Animated.View>
           </View>
-        </TouchableOpacity>
+        </Pressable>
       ) : (
-        <TouchableOpacity
+        <Pressable
           style={[styles.iconButton, style]}
-          onPress={e => {
-            e.stopPropagation()
+          onPress={() => {
             if (noConfirm) handleDelete()
             else setConfirmActive(true)
           }}
@@ -169,7 +156,7 @@ export const DeleteButton: React.FC<{
               <ActivityIndicator color="#ff0000" size="small" />
             </Animated.View>
           </View>
-        </TouchableOpacity>
+        </Pressable>
       )}
       {noConfirm ? null : (
         <DeleteConfirmAlert

package/src/components/button/LoadingButton.tsx

@@ -7,10 +7,10 @@ import {
   StyleSheet,
   Text,
   TextStyle,
-  TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 
 export interface LoadingButtonProps {
   onPress: (() => Promise<any>) | (() => void)
@@ -89,14 +89,13 @@ export const LoadingButton: React.FC<LoadingButtonProps> = ({
   const fallbackColor = useTextColor()
   const color = useMemo(() => colorProp ?? fallbackColor, [colorProp, fallbackColor])
   return (
-    <TouchableOpacity
+    <Pressable
       style={[
         styles.button,
         { borderColor: color, backgroundColor: disabled ? '#f0f0f0' : 'transparent' },
         style,
       ]}
-      onPress={e => {
-        e.stopPropagation()
+      onPress={() => {
         handlePress()
       }}
       disabled={loading || disabled}>
@@ -119,7 +118,7 @@ export const LoadingButton: React.FC<LoadingButtonProps> = ({
           <ActivityIndicator color={color} size="small" />
         </Animated.View>
       </View>
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 

package/src/components/button/Toggle.tsx

@@ -1,6 +1,7 @@
-import { useTheme, useToast } from '@chem-po/react'
-import React, { JSX, useCallback } from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { useBackgroundColor, useBorderColor, useThemeValue, useToast } from '@chem-po/react'
+import React, { JSX, useCallback, useMemo } from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 
 export interface ToggleOption<Option extends string = string> {
   id: Option
@@ -11,8 +12,10 @@ export interface ToggleOption<Option extends string = string> {
 export interface ToggleProps<Option extends string> {
   options: ToggleOption<Option>[]
   value: Option
-  size?: number
+  size?: number | [number, number]
   onChange: (value: Option) => Promise<void> | void
+  style?: StyleProp<ViewStyle>
+  buttonStyle?: StyleProp<ViewStyle>
 }
 
 const ToggleButton = <Option extends string>({
@@ -20,11 +23,13 @@ const ToggleButton = <Option extends string>({
   option: { Render, disabledMessage },
   size,
   onPress,
+  style,
 }: {
   option: ToggleOption<Option>
-  size: number
+  size: number | [number, number]
   selected: boolean
   onPress: () => void
+  style?: StyleProp<ViewStyle>
 }) => {
   const { showError } = useToast()
   const handlePress = useCallback(() => {
@@ -34,24 +39,24 @@ const ToggleButton = <Option extends string>({
       showError(disabledMessage)
     }
   }, [onPress, disabledMessage, showError])
+  const unselectedBackground = useBackgroundColor(150)
+  const selectedBackground = useThemeValue('colors.accent.300')
+  const [width, height] = useMemo(() => (typeof size === 'number' ? [size, size] : size), [size])
   const body = (
-    <View
-      style={[
-        styles.buttonContainer,
-        { width: size, height: size, opacity: !disabledMessage ? 1 : 0.6 },
-      ]}>
-      <TouchableOpacity
+    <View style={[styles.buttonContainer, { width, height, opacity: !disabledMessage ? 1 : 0.6 }]}>
+      <Pressable
         style={[
           styles.button,
           {
-            backgroundColor: selected ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.1)',
+            backgroundColor: selected ? selectedBackground : unselectedBackground,
             pointerEvents: selected ? 'none' : 'auto',
           },
+          style,
         ]}
         onPress={handlePress}
         disabled={!!disabledMessage}>
         {Render(selected)}
-      </TouchableOpacity>
+      </Pressable>
     </View>
   )
 
@@ -63,14 +68,13 @@ export const Toggle = <Option extends string>({
   onChange,
   size = 28,
   options,
+  style,
+  buttonStyle,
 }: ToggleProps<Option>) => {
-  const {
-    theme: {
-      colors: { background },
-    },
-  } = useTheme()
+  const borderColor = useBorderColor()
+  const backgroundColor = useBackgroundColor(150)
   return (
-    <View style={[styles.container, { borderColor: background[300] }]}>
+    <View style={[styles.container, { borderColor, backgroundColor }, style]}>
       {options.map(option => (
         <ToggleButton<Option>
           key={option.id}
@@ -80,6 +84,7 @@ export const Toggle = <Option extends string>({
           option={option}
           size={size}
           selected={option.id === value}
+          style={buttonStyle}
         />
       ))}
     </View>

package/src/components/form/Form.tsx

@@ -20,7 +20,8 @@ import {
 } from '@chem-po/react'
 import React, { FC, useMemo, useState } from 'react'
 import { useFieldArray, useFormContext } from 'react-hook-form'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { Expandable } from '../box/Expandable'
 import { DeleteButton } from '../button/DeleteButton'
 import { Condition } from './Condition'
@@ -108,6 +109,27 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 8,
   },
+  submitButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  submitButtonText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  editButtonText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#4a5568',
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#4a5568',
+  },
 })
 
 export const ListFieldInput: FC<{
@@ -150,11 +172,11 @@ export const ListFieldInput: FC<{
           <Text style={styles.emptyListText}>No items</Text>
         )}
       </View>
-      <TouchableOpacity
+      <Pressable
         style={[styles.newButton, { backgroundColor: buttonColor }]}
         onPress={() => append(emptyData)}>
         <Text style={styles.newButtonText}>+ NEW</Text>
-      </TouchableOpacity>
+      </Pressable>
     </View>
   )
 }
@@ -306,15 +328,13 @@ export const DataView = ({
             <Text style={styles.dataViewTitle}>{fieldName}</Text>
             <View style={styles.dataViewActions}>
               {onDelete && <DeleteButton onDelete={onDelete} itemName={itemName ?? 'item'} />}
-              {onSubmit && (
-                <TouchableOpacity onPress={() => setIsEditing(true)}>
-                  <Text>Edit</Text>
-                </TouchableOpacity>
-              )}
+              <Pressable onPress={() => setIsEditing(true)}>
+                <Text style={styles.editButtonText}>Edit</Text>
+              </Pressable>
               {onClose && (
-                <TouchableOpacity onPress={onClose}>
-                  <Text>Close</Text>
-                </TouchableOpacity>
+                <Pressable onPress={onClose}>
+                  <Text style={styles.cancelButtonText}>Cancel</Text>
+                </Pressable>
               )}
             </View>
           </View>

package/src/components/form/FormFooter.tsx

@@ -7,7 +7,8 @@ import {
 } from '@chem-po/react'
 import React, { FC, PropsWithChildren, useEffect, useMemo, useRef } from 'react'
 import { useFormContext, useFormState } from 'react-hook-form'
-import { ActivityIndicator, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { ActivityIndicator, Animated, StyleSheet, Text, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { UploadProgress } from './UploadProgress'
 
 const buttonTextColor = '#ffffff'
@@ -75,12 +76,12 @@ const CancelButton = ({
   const placeholderColor = usePlaceholderColor()
   const borderColor = useBorderColor()
   return (
-    <TouchableOpacity
+    <Pressable
       disabled={submitting}
       style={[styles.cancelButton, { borderColor }]}
       onPress={onBack}>
       <Text style={[styles.cancelButtonText, { color: placeholderColor }]}>{children}</Text>
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 
@@ -109,7 +110,7 @@ export const SubmitButton: FC<
         styles.submitButtonContainer,
         { opacity: animatedOpacity, backgroundColor: buttonBg },
       ]}>
-      <TouchableOpacity
+      <Pressable
         style={styles.submitButton}
         onPress={() => {
           onSubmitClick()
@@ -120,7 +121,7 @@ export const SubmitButton: FC<
         ) : (
           <Text style={[styles.submitButtonText, { textShadowColor }]}>{children}</Text>
         )}
-      </TouchableOpacity>
+      </Pressable>
     </Animated.View>
   )
 }