Fall back to JS SegmentedControl for icons

Fixes #4.
This is a workaround for react-native-segmented-control/segmented-control#635

DirectPicker.tsx

@@ -1,7 +1,10 @@
-import SegmentedControl, {
+import type {
   NativeSegmentedControlIOSChangeEvent,
   SegmentedControlProps,
 } from "@react-native-segmented-control/segmented-control";
+import SegmentedControl from "@react-native-segmented-control/segmented-control";
+// TODO: Use the native SegmentedControl for icons when iOS image resizing is fixed
+import SegmentedControlWithIcons from "@react-native-segmented-control/segmented-control/js/SegmentedControl.js";
 import { useCallback, useMemo } from "react";
 import { NativeSyntheticEvent } from "react-native";
 
@@ -30,13 +33,14 @@ export function DirectPicker<T extends string>({
       }),
     [values]
   );
-  const labels = useMemo(
-    () =>
-      normalizedValues.map(
-        (item) => (item.icon as string) /* TODO: this is a lie */ ?? item.value
-      ),
-    [normalizedValues]
-  );
+  const [labels, hasIcons] = useMemo(() => {
+    let hasIcons;
+    const labels = normalizedValues.map((item) => {
+      hasIcons ||= item.icon != null;
+      return (item.icon as string) /* TODO: this is a lie */ ?? item.value;
+    });
+    return [labels, hasIcons];
+  }, [normalizedValues]);
   const selectedIndex = useMemo(() => {
     return normalizedValues.findIndex((item) => item.value === value) ?? -1;
   }, [value, normalizedValues]);
@@ -49,8 +53,10 @@ export function DirectPicker<T extends string>({
     [normalizedValues, onValueChange]
   );
 
+  const Component = hasIcons ? SegmentedControlWithIcons : SegmentedControl;
+
   return (
-    <SegmentedControl
+    <Component
       // TODO: Make `values` readonly upstream
       values={labels}
       selectedIndex={selectedIndex}

segmented-control-js.d.ts

@@ -0,0 +1,5 @@
+// Hack to expose the pure JS version of SegmentedControl with types
+declare module "@react-native-segmented-control/segmented-control/js/SegmentedControl.js" {
+  import SegmentedControl from "@react-native-segmented-control/segmented-control";
+  export default SegmentedControl;
+}