ferns-ui 1.16.1 → 2.0.0-beta.2

package/src/DataTable.tsx

@@ -1,6 +1,7 @@
 import {FontAwesome6} from "@expo/vector-icons";
 import React, {FC, useCallback, useMemo, useRef, useState} from "react";
 import {NativeScrollEvent, NativeSyntheticEvent, Pressable, ScrollView, View} from "react-native";
+// @ts-ignore
 import Markdown from "react-native-markdown-display";
 
 import {Box} from "./Box";
@@ -17,9 +18,9 @@ import {Icon} from "./Icon";
 import {InfoModalIcon} from "./InfoModalIcon";
 import {Modal} from "./Modal";
 import {Pagination} from "./Pagination";
+import {TableTitle} from "./table/TableTitle";
 import {Text} from "./Text";
 import {useTheme} from "./Theme";
-import {TableTitle} from "./table/TableTitle";
 
 // TODO: Add permanent horizontal scroll bar so users with only a mouse can scroll left/right
 // easily.
@@ -298,7 +299,7 @@ interface DataTableHeaderProps {
   hasMoreContent: boolean;
   pinnedColumns: number;
   columnWidths: number[];
-  headerScrollRef: React.RefObject<ScrollView>;
+  headerScrollRef: React.RefObject<ScrollView | null>;
   sortColumn?: ColumnSortInterface;
   onSort: (index: number) => void;
   onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>, isHeader: boolean) => void;
@@ -399,7 +400,7 @@ interface DataTableContentProps {
   pinnedColumns: number;
   alternateRowBackground: boolean;
   columnWidths: number[];
-  bodyScrollRef: React.RefObject<ScrollView>;
+  bodyScrollRef: React.RefObject<ScrollView | null>;
   onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>, isHeader: boolean) => void;
   moreContentComponent?: React.ComponentType<{
     column: DataTableColumn;

package/src/DateTimeField.tsx

@@ -262,20 +262,20 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
       if (type === "date" || type === "datetime") {
         if (fieldIndex === 0) {
           // Month
-          const monthNum = parseInt(fieldValue, 10);
-          if (Number.isNaN(monthNum) || monthNum < 1 || monthNum > 12) {
+          const monthNum = parseInt(fieldValue);
+          if (isNaN(monthNum) || monthNum < 1 || monthNum > 12) {
             return "Month must be between 1 and 12";
           }
         } else if (fieldIndex === 1) {
           // Day
-          const dayNum = parseInt(fieldValue, 10);
-          if (Number.isNaN(dayNum) || dayNum < 1 || dayNum > 31) {
+          const dayNum = parseInt(fieldValue);
+          if (isNaN(dayNum) || dayNum < 1 || dayNum > 31) {
             return "Day must be between 1 and 31";
           }
         } else if (fieldIndex === 2) {
           // Year
-          const yearNum = parseInt(fieldValue, 10);
-          if (Number.isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
+          const yearNum = parseInt(fieldValue);
+          if (isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
             return "Year must be between 1900 and 2100";
           }
         }
@@ -284,14 +284,14 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
       if (type === "time" || type === "datetime") {
         if (fieldIndex === (type === "time" ? 0 : 3)) {
           // Hour
-          const hourNum = parseInt(fieldValue, 10);
-          if (Number.isNaN(hourNum) || hourNum < 1 || hourNum > 12) {
+          const hourNum = parseInt(fieldValue);
+          if (isNaN(hourNum) || hourNum < 1 || hourNum > 12) {
             return "Hour must be between 1 and 12";
           }
         } else if (fieldIndex === (type === "time" ? 1 : 4)) {
           // Minute
-          const minuteNum = parseInt(fieldValue, 10);
-          if (Number.isNaN(minuteNum) || minuteNum < 0 || minuteNum > 59) {
+          const minuteNum = parseInt(fieldValue);
+          if (isNaN(minuteNum) || minuteNum < 0 || minuteNum > 59) {
             return "Minute must be between 0 and 59";
           }
         }
@@ -323,7 +323,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         if (!monthVal || !dayVal || !yearVal || !hour || !minuteVal) {
           return undefined;
         }
-        let hourNum = parseInt(hourVal, 10);
+        let hourNum = parseInt(hourVal);
         if (ampPmVal === "pm" && hourNum !== 12) {
           hourNum += 12;
         } else if (ampPmVal === "am" && hourNum === 12) {
@@ -331,11 +331,11 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         }
         date = DateTime.fromObject(
           {
-            year: parseInt(yearVal, 10),
-            month: parseInt(monthVal, 10),
-            day: parseInt(dayVal, 10),
+            year: parseInt(yearVal),
+            month: parseInt(monthVal),
+            day: parseInt(dayVal),
             hour: hourNum,
-            minute: parseInt(minuteVal, 10),
+            minute: parseInt(minuteVal),
             second: 0,
             millisecond: 0,
           },
@@ -349,9 +349,9 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         }
         date = DateTime.fromObject(
           {
-            year: parseInt(yearVal, 10),
-            month: parseInt(monthVal, 10),
-            day: parseInt(dayVal, 10),
+            year: parseInt(yearVal),
+            month: parseInt(monthVal),
+            day: parseInt(dayVal),
             hour: 0,
             minute: 0,
             second: 0,
@@ -365,7 +365,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         if (!hour || !minuteVal) {
           return undefined;
         }
-        let hourNum = parseInt(hour, 10);
+        let hourNum = parseInt(hour);
         if (ampPmVal === "pm" && hourNum !== 12) {
           hourNum += 12;
         } else if (ampPmVal === "am" && hourNum === 12) {
@@ -374,7 +374,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         date = DateTime.fromObject(
           {
             hour: hourNum,
-            minute: parseInt(minuteVal, 10),
+            minute: parseInt(minuteVal),
             second: 0,
             millisecond: 0,
           },
@@ -404,7 +404,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         // so it's always a valid time and easier to edit.
         // This lets users freely edit or clear the minute field without breaking the time format.
         const finalValue = numericValue === "" ? "00" : numericValue.slice(-2);
-        const minuteNum = parseInt(finalValue, 10);
+        const minuteNum = parseInt(finalValue);
 
         // Update the minute state so the UI reflects the latest input,
         // even if it's temporarily invalid
@@ -412,7 +412,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         setMinute(finalValue);
 
         // Only update ref and result if it's a valid minute value
-        if (!Number.isNaN(minuteNum) && minuteNum >= 0 && minuteNum <= 59) {
+        if (!isNaN(minuteNum) && minuteNum >= 0 && minuteNum <= 59) {
           pendingValueRef.current = {minute: finalValue};
           setFieldErrors((prev) => ({...prev, [index]: undefined}));
 

package/src/EmailField.tsx

@@ -13,11 +13,7 @@ export const EmailField: FC<EmailFieldProps> = ({
   ...rest
 }) => {
   const [localValue, setLocalValue] = useState<string>(value || "");
-
-  // Sync local state with incoming prop values
-  useEffect(() => {
-    setLocalValue(value || "");
-  }, [value]);
+  const [error, setError] = useState<string | undefined>(errorText);
 
   const validateEmail = useCallback((email: string): string | undefined => {
     if (email.trim() === "") {
@@ -30,36 +26,60 @@ export const EmailField: FC<EmailFieldProps> = ({
     return undefined;
   }, []);
 
-  const localOnChange = useCallback(
-    (e: string) => {
-      setLocalValue(e);
-      const err = validateEmail(e);
-      if (!err && onChange) {
-        onChange(e);
+  // Sync local state with incoming prop values
+  useEffect(() => {
+    setLocalValue(value || "");
+    setError(errorText);
+  }, [value, errorText]);
+
+  const handleBlur = useCallback(
+    (email: string) => {
+      if (onBlur) {
+        onBlur(email);
+      }
+      const validationError = validateEmail(email);
+      if (validationError) {
+        setError(validationError);
+      } else {
+        setError(undefined);
       }
     },
-    [onChange, validateEmail, setLocalValue]
+    [onBlur, validateEmail]
   );
 
-  const localOnBlur = useCallback(
-    (e: string) => {
-      setLocalValue(e);
-      const err = validateEmail(e);
-      if (!err && onBlur) {
-        onBlur(e);
+  const handleChange = useCallback(
+    (email: string) => {
+      setLocalValue(email);
+      const validationError = validateEmail(email);
+      if (error && !validationError) {
+        setError(undefined);
+      }
+      if (!validationError) {
+        onChange(email);
       }
     },
-    [onBlur, validateEmail]
+    [onChange, error, validateEmail]
   );
+
   return (
     <TextField
-      errorText={errorText || validateEmail(localValue)}
+      errorText={error}
       iconName={iconName}
       placeholder={placeholder}
       type="email"
       value={localValue}
-      onBlur={localOnBlur}
-      onChange={localOnChange}
+      onBlur={(e) => {
+        handleBlur(e);
+        if (onBlur) {
+          onBlur(value || "");
+        }
+      }}
+      onChange={(e) => {
+        handleChange(e);
+        if (onChange) {
+          onChange;
+        }
+      }}
       {...rest}
     />
   );

package/src/FernsProvider.tsx

@@ -9,7 +9,10 @@ import {Toast} from "./Toast";
 export const FernsProvider: FC<{
   children: React.ReactNode;
   openAPISpecUrl?: string;
-}> = ({children, openAPISpecUrl}) => {
+}> = ({
+  children,
+  openAPISpecUrl,
+}) => {
   return (
     <ThemeProvider>
       <ToastProvider

package/src/Heading.tsx

@@ -4,7 +4,7 @@ import {
   useFonts,
 } from "@expo-google-fonts/titillium-web";
 import React from "react";
-import {Text as NativeText, Platform, StyleProp, TextStyle} from "react-native";
+import {Platform, StyleProp, Text as NativeText, TextStyle} from "react-native";
 
 import {HeadingProps} from "./Common";
 import {useTheme} from "./Theme";
@@ -14,7 +14,6 @@ const fontSizeAndWeightWeb = {
   md: {size: 18, weight: "bold"},
   lg: {size: 24, weight: "bold"},
   xl: {size: 32, weight: "bold"},
-  "2xl": {size: 48, weight: "bold"},
 };
 
 const fontSizeAndWeighMobile = {
@@ -22,7 +21,6 @@ const fontSizeAndWeighMobile = {
   md: {size: 16, weight: "bold"},
   lg: {size: 20, weight: "bold"},
   xl: {size: 28, weight: "bold"},
-  "2xl": {size: 32, weight: "bold"},
 };
 
 const fontSizes = Platform.OS === "web" ? fontSizeAndWeightWeb : fontSizeAndWeighMobile;

package/src/Hyperlink.tsx

@@ -111,7 +111,7 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
         component.props.children.substring(_lastIndex, component.props.children.length)
       );
       return React.cloneElement(component, componentProps, elements);
-    } catch (_error) {
+    } catch (error) {
       return component;
     }
   };
@@ -156,7 +156,7 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
       <View {...viewProps} style={this.props.style}>
         {!this.props.onPress && !this.props.onLongPress && !this.props.linkStyle
           ? this.props.children
-          : this.parse(this).props.children}
+          : (this.parse(this).props as {children?: React.ReactNode}).children}
       </View>
     );
   }

package/src/IconButton.tsx

@@ -1,7 +1,7 @@
 import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
 import debounce from "lodash/debounce";
 import React, {FC, useState} from "react";
-import {ActivityIndicator, Text as NativeText, Pressable, View} from "react-native";
+import {ActivityIndicator, Pressable, Text as NativeText, View} from "react-native";
 
 import {IconButtonProps} from "./Common";
 import {isMobileDevice} from "./MediaQuery";
@@ -98,7 +98,7 @@ const IconButtonComponent: FC<IconButtonProps> = ({
   return (
     <Pressable
       accessibilityHint={
-        (accessibilityHint ?? withConfirmation)
+        accessibilityHint ?? withConfirmation
           ? `Opens a confirmation dialog to confirm ${accessLabel}`
           : `Press to perform ${accessLabel} action`
       }

package/src/Image.tsx

@@ -3,7 +3,6 @@ import {Dimensions, Image as NativeImage} from "react-native";
 
 import {Box} from "./Box";
 import {ImageProps} from "./Common";
-
 const {width: DEVICE_WIDTH} = Dimensions.get("window");
 
 export class Image extends React.Component<ImageProps, {}> {

package/src/MobileAddressAutoComplete.tsx

@@ -108,7 +108,7 @@ export const MobileAddressAutocomplete = ({
               handleAddressChange(event.nativeEvent.text);
             },
           }}
-          onPress={(_data, details = null) => {
+          onPress={(data, details = null) => {
             const addressComponents = details?.address_components;
             const formattedAddressObject = processAddressComponents(addressComponents, {
               includeCounty,

package/src/Modal.tsx

@@ -1,11 +1,14 @@
 import React, {FC, useEffect, useRef} from "react";
-import {Dimensions, DimensionValue, Pressable, Modal as RNModal, View} from "react-native";
+import {Dimensions, DimensionValue, Modal as RNModal, Pressable, View} from "react-native";
 import ActionSheet, {ActionSheetRef} from "react-native-actions-sheet";
-import {Gesture, GestureDetector} from "react-native-gesture-handler";
-import {runOnJS} from "react-native-reanimated";
+import {
+  PanGestureHandler,
+  PanGestureHandlerStateChangeEvent,
+  State,
+} from "react-native-gesture-handler";
 
 import {Button} from "./Button";
-import type {ModalProps} from "./Common";
+import {ModalProps} from "./Common";
 import {Heading} from "./Heading";
 import {Icon} from "./Icon";
 import {isMobileDevice} from "./MediaQuery";
@@ -126,13 +129,7 @@ const ModalContent: FC<{
         </View>
       )}
       {children && (
-        <View
-          style={{
-            marginTop: text ? 0 : 12,
-            width: "100%",
-            flex: isMobile ? undefined : 1,
-          }}
-        >
+        <View style={{marginTop: text ? 0 : 12, width: "100%", flex: isMobile ? undefined : 1}}>
           {children}
         </View>
       )}
@@ -166,7 +163,6 @@ const ModalContent: FC<{
 
 export const Modal: FC<ModalProps> = ({
   children,
-  persistOnBackgroundClick = false,
   primaryButtonDisabled = false,
   primaryButtonText,
   secondaryButtonText,
@@ -188,28 +184,23 @@ export const Modal: FC<ModalProps> = ({
     }
   };
 
-  const handlePrimaryButtonClick = (
-    value?: Parameters<NonNullable<ModalProps["primaryButtonOnClick"]>>[0]
-  ) => {
+  const handlePrimaryButtonClick = (value?: Parameters<NonNullable<ModalProps["primaryButtonOnClick"]>>[0]) => {
     if (visible && primaryButtonOnClick) {
       return primaryButtonOnClick(value);
     }
   };
 
-  const handleSecondaryButtonClick = (
-    value?: Parameters<NonNullable<ModalProps["secondaryButtonOnClick"]>>[0]
-  ) => {
+  const handleSecondaryButtonClick = (value?: Parameters<NonNullable<ModalProps["secondaryButtonOnClick"]>>[0]) => {
     if (visible && secondaryButtonOnClick) {
       return secondaryButtonOnClick(value);
     }
   };
 
-  const dragToClose = Gesture.Pan().onEnd((event) => {
-    if (event.translationY > 20) {
-      // Gesture callbacks run on the UI thread, runOnJS is required to safely invoke handleDismiss on the JS thread
-      runOnJS(handleDismiss)();
+  const onHandlerStateChange = ({nativeEvent}: PanGestureHandlerStateChangeEvent) => {
+    if (nativeEvent.state === State.END && nativeEvent.translationY > 100) {
+      handleDismiss();
     }
-  });
+  };
 
   // Open the action sheet ref when the visible prop changes.
   useEffect(() => {
@@ -222,7 +213,6 @@ export const Modal: FC<ModalProps> = ({
   const sizePx = getModalSize(size);
 
   const modalContentProps = {
-    persistOnBackgroundClick,
     title,
     subtitle,
     text,
@@ -239,22 +229,13 @@ export const Modal: FC<ModalProps> = ({
 
   if (isMobile) {
     return (
-      <ActionSheet
-        ref={actionSheetRef}
-        closeOnTouchBackdrop={!persistOnBackgroundClick}
-        // Disable ActionSheet's built-in gestures to avoid conflicts with scrolling
-        gestureEnabled={false}
-        onClose={handleDismiss}
-      >
-        <View>
-          {/* Attach our own swipe-to-dismiss gesture to the top handle */}
-          <GestureDetector gesture={dragToClose}>
+      <ActionSheet ref={actionSheetRef} onClose={handleDismiss}>
+        <PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
+          <View>
             <View
               accessibilityHint="Pull down to close the modal"
               aria-label="Pull down bar"
               aria-role="adjustable"
-              // add hitSlop to make the bar easier to hit since it's small
-              hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}
               style={{
                 justifyContent: "center",
                 alignItems: "center",
@@ -267,33 +248,15 @@ export const Modal: FC<ModalProps> = ({
                 marginTop: 10,
               }}
             />
-          </GestureDetector>
-
-          <ModalContent {...modalContentProps}>{children}</ModalContent>
-        </View>
+            <ModalContent {...modalContentProps}>{children}</ModalContent>
+          </View>
+        </PanGestureHandler>
       </ActionSheet>
     );
   } else {
     return (
       <RNModal animationType="slide" transparent visible={visible} onRequestClose={handleDismiss}>
-        <Pressable
-          style={{
-            flex: 1,
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-          onPress={persistOnBackgroundClick ? undefined : handleDismiss}
-        >
-          <Pressable
-            style={{cursor: "auto"}}
-            onPress={(e) => {
-              persistOnBackgroundClick ? null : e.stopPropagation();
-            }}
-          >
-            <ModalContent {...modalContentProps}>{children}</ModalContent>
-          </Pressable>
-        </Pressable>
+        <ModalContent {...modalContentProps}>{children}</ModalContent>
       </RNModal>
     );
   }

package/src/ModalSheet.tsx

@@ -5,7 +5,7 @@ import {Modalize} from "react-native-modalize";
 import {Portal} from "react-native-portalize";
 
 export const useCombinedRefs = (...refs: any) => {
-  const targetRef = useRef();
+  const targetRef = useRef<any>(null);
 
   // Iterate through the refs array, and set the ref.current value to the targetRef
   useEffect(() => {

package/src/NumberField.tsx

@@ -24,8 +24,8 @@ export const NumberField: FC<NumberFieldProps> = ({
       if (!v) {
         return;
       }
-      const num = type === "number" ? parseInt(v, 10) : parseFloat(v);
-      if (Number.isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
+      const num = type === "number" ? parseInt(v) : parseFloat(v);
+      if (isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
         return "Value must be an integer";
       } else if (
         (type === "decimal" && v.match(/[^0-9.]+/) !== null) ||
@@ -47,19 +47,13 @@ export const NumberField: FC<NumberFieldProps> = ({
   // Only return the value if it is a valid number
   const localOnChange = useCallback(
     (v: string) => {
-      if (type === "decimal" && v === ".") {
-        // if type is decimal and dot is the first character add 0 before it
-        setValue("0.");
-        rest.onChange("0.");
-        return;
-      }
+      setValue(v);
       const err = getError(v);
       if (!err) {
-        setValue(v);
         rest.onChange(v);
       }
     },
-    [getError, rest, type]
+    [getError, rest]
   );
 
   return <TextField {...rest} errorText={error} value={value} onChange={localOnChange} />;

package/src/NumberPickerActionSheet.tsx

@@ -9,12 +9,16 @@ import {NumberPickerActionSheetProps} from "./Common";
 
 const PICKER_HEIGHT = 104;
 
-type NumberPickerActionSheetState = {};
+interface NumberPickerActionSheetState {}
 
 export class NumberPickerActionSheet extends React.Component<
   NumberPickerActionSheetProps,
   NumberPickerActionSheetState
 > {
+  constructor(props: NumberPickerActionSheetProps) {
+    super(props);
+  }
+
   render() {
     return (
       <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>

package/src/Page.tsx

@@ -47,7 +47,7 @@ export class Page extends React.Component<PageProps, {}> {
             <Button
               text={this.props.rightButton}
               variant="muted"
-              onClick={() => this.props.rightButtonOnClick?.()}
+              onClick={() => this.props.rightButtonOnClick && this.props.rightButtonOnClick()}
             />
           </Box>
         )}

package/src/Pagination.tsx

@@ -11,7 +11,12 @@ const PaginationButton: FC<{
   onClick: () => void;
   totalPages?: number;
   page?: number;
-}> = ({type, onClick, totalPages = 1, page = 1}) => {
+}> = ({
+  type,
+  onClick,
+  totalPages = 1,
+  page = 1,
+}) => {
   let icon: IconName;
   let disabled = false;
 
@@ -51,7 +56,11 @@ const PaginationNumber: FC<{
   number: number | "more";
   current: boolean;
   onClick: () => void;
-}> = ({number, current, onClick}) => {
+}> = ({
+  number,
+  current,
+  onClick,
+}) => {
   // Shortcut to make rendering the number buttons easier.
   if (number === "more") {
     return <PaginationButton type="more" onClick={() => {}} />;

package/src/Permissions.ts

@@ -4,8 +4,8 @@
 // import Permissions from "react-native-permissions";
 import {PermissionKind, PermissionStatus} from "./Common";
 
-export async function requestPermissions(_kind: PermissionKind): Promise<PermissionStatus> {
-  return new Promise((_resolve, _reject) => {
+export async function requestPermissions(kind: PermissionKind): Promise<PermissionStatus> {
+  return new Promise(async (resolve, reject) => {
     return "denied";
   });
   // const userPropertyKey = `PermissionsFor${capitalize(kind)}`;

package/src/PickerSelect.tsx

@@ -201,7 +201,7 @@ export function RNPickerSelect({
       Keyboard.dismiss();
     }
 
-    setAnimationType(modalProps?.animationType ? modalProps?.animationType : "slide");
+    setAnimationType(modalProps && modalProps?.animationType ? modalProps?.animationType : "slide");
 
     triggerOpenCloseCallbacks();
 

package/src/SectionDivider.tsx

@@ -1,6 +1,6 @@
+import {useTheme} from "./Theme";
 import React from "react";
 import {View} from "react-native";
-import {useTheme} from "./Theme";
 
 export const SectionDivider: React.FC<{}> = () => {
   const {theme} = useTheme();

package/src/SegmentedControl.tsx

@@ -24,9 +24,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   }, []);
 
   const handleNext = useCallback(() => {
-    setStartIndex((prev) =>
-      Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4))
-    );
+    setStartIndex((prev) => Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4)));
   }, [items.length, maxItems]);
 
   const visibleItems = maxItems ? items.slice(startIndex, startIndex + maxItems) : items;

package/src/Signature.native.tsx

@@ -21,14 +21,14 @@ export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
   };
 
   const onBegin = () => {
-    onStart?.();
+    onStart && onStart();
   };
 
   // Called after end of stroke. Kind of goofy if you ask me,
   // but you need this in order to trigger the 'onOK' callback that gives us the actual image.
   const handleEnd = () => {
     ref.current?.readSignature();
-    onEnd?.();
+    onEnd && onEnd();
   };
 
   return (

package/src/SignatureField.tsx

@@ -64,10 +64,10 @@ export const SignatureField = ({
         <Signature
           onChange={onChange}
           onEnd={() => {
-            onEnd?.();
+            onEnd && onEnd();
           }}
           onStart={() => {
-            onStart?.();
+            onStart && onStart();
           }}
         />
       </View>