clox-picker 0.1.1

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android"],
+  "apple": {
+    "modules": ["CloxPickerModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.cloxpicker.CloxPickerModule"]
+  }
+}

package/ios/CloxPicker.podspec

@@ -0,0 +1,29 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'CloxPicker'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '15.1',
+    :tvos => '15.1'
+  }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/prolific-life/clox-picker' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+  s.exclude_files = "build/**/*"
+end

package/ios/CloxPickerModule.swift

@@ -0,0 +1,48 @@
+import ExpoModulesCore
+import UIKit
+
+public class CloxPickerModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("CloxPicker")
+
+    Function("getHello") { () -> String in
+      "Hello world"
+    }
+
+    Function("setColorScheme") { (scheme: String) -> Void in
+      DispatchQueue.main.async {
+        if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene {
+          if let window = windowScene.windows.first {
+            switch scheme {
+            case "dark":
+              window.overrideUserInterfaceStyle = .dark
+            case "light":
+              window.overrideUserInterfaceStyle = .light
+            default:
+              window.overrideUserInterfaceStyle = .unspecified
+            }
+          }
+        }
+      }
+    }
+
+    View(CloxPickerView.self) {
+      Prop("tabs") { (view: CloxPickerView, tabs: [[String: Any]]) in
+        view.setTabs(tabs)
+      }
+      Prop("height") { (view: CloxPickerView, height: Double) in
+        view.setHeight(height)
+      }
+      Prop("value") { (view: CloxPickerView, value: Int) in
+        view.setValue(value)
+      }
+      Prop("useLiquidGlass") { (view: CloxPickerView, use: Bool) in
+        view.setUseLiquidGlass(use)
+      }
+      Prop("selectedColor") { (view: CloxPickerView, color: String?) in
+        view.setSelectedColor(color)
+      }
+      Events("onTabChange")
+    }
+  }
+}

package/ios/CloxPickerView.swift

@@ -0,0 +1,372 @@
+import ExpoModulesCore
+import SwiftUI
+import UIKit
+
+// MARK: - Tab model
+struct CloxPickerTabItem: Identifiable {
+  let id: Int
+  let name: String
+  let iconUri: String?
+}
+
+// MARK: - UITabBar wrapper for horizontal segmented control
+class HorizontalTabBar: UITabBar {
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    
+    // Make tab bar horizontal instead of vertical
+    var xPosition: CGFloat = 0
+    let itemWidth = bounds.width / CGFloat(items?.count ?? 1)
+    
+    for item in subviews {
+      if let itemView = item as? UIControl {
+        itemView.frame = CGRect(
+          x: xPosition,
+          y: 0,
+          width: itemWidth,
+          height: bounds.height
+        )
+        xPosition += itemWidth
+      }
+    }
+  }
+}
+
+// MARK: - UIKit Tab Bar Wrapper
+struct UIKitTabBarControl: UIViewRepresentable {
+  let tabs: [CloxPickerTabItem]
+  @Binding var selectedIndex: Int
+  let height: CGFloat
+  let selectedColor: UIColor?
+  
+  func makeUIView(context: Context) -> HorizontalTabBar {
+    let tabBar = HorizontalTabBar()
+    tabBar.isTranslucent = true
+    
+    // Create tab bar items with icons
+    let tabBarItems = tabs.enumerated().map { index, tab in
+      let item = UITabBarItem(title: tab.name, image: nil, tag: index)
+      
+      // Load icon if provided
+      if let iconUri = tab.iconUri {
+        if let url = URL(string: iconUri) {
+          // Load image asynchronously
+          URLSession.shared.dataTask(with: url) { data, _, _ in
+            if let data = data, let image = UIImage(data: data) {
+              // Use template mode so icon adapts to light/dark mode (black/white)
+              let renderedImage = image.withRenderingMode(.alwaysTemplate)
+              DispatchQueue.main.async {
+                item.image = renderedImage
+              }
+            }
+          }.resume()
+        } else if iconUri.hasPrefix("/") {
+          // Local file
+          if let image = UIImage(contentsOfFile: iconUri) {
+            item.image = image.withRenderingMode(.alwaysTemplate)
+          }
+        }
+      }
+      
+      return item
+    }
+    tabBar.setItems(tabBarItems, animated: false)
+    if selectedIndex < tabBarItems.count {
+      tabBar.selectedItem = tabBarItems[selectedIndex]
+    }
+    
+    // Configure appearance for iOS 26 liquid glass
+    if #available(iOS 26.0, *) {
+      // Liquid glass is automatic, but we can customize colors
+      let appearance = UITabBarAppearance()
+      appearance.configureWithTransparentBackground()
+      
+      // Apply selected color if provided
+      if let selectedColor = selectedColor {
+        tabBar.tintColor = selectedColor
+        appearance.stackedLayoutAppearance.selected.iconColor = selectedColor
+        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
+          .foregroundColor: selectedColor
+        ]
+        appearance.inlineLayoutAppearance.selected.iconColor = selectedColor
+        appearance.inlineLayoutAppearance.selected.titleTextAttributes = [
+          .foregroundColor: selectedColor
+        ]
+        appearance.compactInlineLayoutAppearance.selected.iconColor = selectedColor
+        appearance.compactInlineLayoutAppearance.selected.titleTextAttributes = [
+          .foregroundColor: selectedColor
+        ]
+      }
+      
+      tabBar.standardAppearance = appearance
+      tabBar.scrollEdgeAppearance = appearance
+    } else {
+      // For iOS < 26, use tintColor
+      if let selectedColor = selectedColor {
+        tabBar.tintColor = selectedColor
+      }
+    }
+    
+    tabBar.delegate = context.coordinator
+    return tabBar
+  }
+  
+  func updateUIView(_ uiView: HorizontalTabBar, context: Context) {
+    // Update selected color if changed
+    if let selectedColor = selectedColor {
+      if #available(iOS 26.0, *) {
+        let appearance = uiView.standardAppearance.copy()
+        appearance.stackedLayoutAppearance.selected.iconColor = selectedColor
+        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
+          .foregroundColor: selectedColor
+        ]
+        appearance.inlineLayoutAppearance.selected.iconColor = selectedColor
+        appearance.inlineLayoutAppearance.selected.titleTextAttributes = [
+          .foregroundColor: selectedColor
+        ]
+        appearance.compactInlineLayoutAppearance.selected.iconColor = selectedColor
+        appearance.compactInlineLayoutAppearance.selected.titleTextAttributes = [
+          .foregroundColor: selectedColor
+        ]
+        uiView.standardAppearance = appearance
+        uiView.scrollEdgeAppearance = appearance
+      }
+      uiView.tintColor = selectedColor
+    }
+    
+    // Update items if tabs changed
+    let currentItemCount = uiView.items?.count ?? 0
+    if currentItemCount != tabs.count {
+      let tabBarItems = tabs.enumerated().map { index, tab in
+        let item = UITabBarItem(title: tab.name, image: nil, tag: index)
+        if let iconUri = tab.iconUri {
+          if let url = URL(string: iconUri) {
+            URLSession.shared.dataTask(with: url) { data, _, _ in
+              if let data = data, let image = UIImage(data: data) {
+                // Use template mode so icon adapts to light/dark mode (black/white)
+                let renderedImage = image.withRenderingMode(.alwaysTemplate)
+                DispatchQueue.main.async {
+                  item.image = renderedImage
+                }
+              }
+            }.resume()
+          } else if iconUri.hasPrefix("/") {
+            if let image = UIImage(contentsOfFile: iconUri) {
+              item.image = image.withRenderingMode(.alwaysTemplate)
+            }
+          }
+        }
+        return item
+      }
+      uiView.setItems(tabBarItems, animated: false)
+    }
+    
+    // Update selection
+    if let items = uiView.items, selectedIndex < items.count {
+      uiView.selectedItem = items[selectedIndex]
+    }
+  }
+  
+  func makeCoordinator() -> Coordinator {
+    Coordinator(self)
+  }
+  
+  class Coordinator: NSObject, UITabBarDelegate {
+    var parent: UIKitTabBarControl
+    
+    init(_ parent: UIKitTabBarControl) {
+      self.parent = parent
+    }
+    
+    func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
+      parent.selectedIndex = item.tag
+    }
+  }
+}
+
+// MARK: - Segmented Picker using TabView's tab bar
+struct SegmentedPickerView: View {
+  let tabs: [CloxPickerTabItem]
+  let height: CGFloat
+  @Binding var selectedIndex: Int
+  let useLiquidGlass: Bool
+  let selectedColor: UIColor?
+  let onSelectionChange: (Int) -> Void
+
+  var body: some View {
+    UIKitTabBarControl(
+      tabs: tabs,
+      selectedIndex: $selectedIndex,
+      height: height,
+      selectedColor: selectedColor
+    )
+    .frame(maxWidth: .infinity, minHeight: height)
+    .frame(height: height)
+    .clipped()
+    .onChange(of: selectedIndex) { newValue in
+      onSelectionChange(newValue)
+    }
+  }
+}
+
+// MARK: - CloxPickerView (ExpoView)
+public class CloxPickerView: ExpoView {
+  private var hostingController: UIHostingController<SegmentedPickerView>?
+  private var currentTabs: [CloxPickerTabItem] = []
+  private var currentHeight: CGFloat = 44
+  private var currentValue: Int = 0
+  private var useLiquidGlass: Bool = true
+  private var selectedColor: UIColor?
+
+  private let onTabChange = EventDispatcher()
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    backgroundColor = .clear
+  }
+
+  func setTabs(_ tabs: [[String: Any]]) {
+    currentTabs = tabs.compactMap { dict -> CloxPickerTabItem? in
+      guard let name = dict["name"] as? String,
+            let id = dict["id"] as? Int else { return nil }
+      let icon = (dict["icon"] as? [String: Any])?["uri"] as? String
+      return CloxPickerTabItem(id: id, name: name, iconUri: icon)
+    }
+    if currentTabs.isEmpty {
+      currentTabs = [CloxPickerTabItem(id: 0, name: "Tab", iconUri: nil)]
+    }
+    updateHostingView()
+  }
+
+  func setHeight(_ height: Double) {
+    currentHeight = CGFloat(max(24, min(96, height)))
+    updateHostingView()
+  }
+
+  func setValue(_ value: Int) {
+    currentValue = max(0, min(value, currentTabs.count - 1))
+    updateHostingView()
+  }
+
+  func setUseLiquidGlass(_ use: Bool) {
+    useLiquidGlass = use
+    updateHostingView()
+  }
+
+  func setSelectedColor(_ colorString: String?) {
+    if let colorString = colorString {
+      selectedColor = UIColor.fromHex(colorString)
+    } else {
+      selectedColor = nil
+    }
+    updateHostingView()
+  }
+
+  private func updateHostingView() {
+    let binding = Binding(
+      get: { [weak self] in self?.currentValue ?? 0 },
+      set: { [weak self] newValue in
+        self?.currentValue = newValue
+      }
+    )
+    let rootView = SegmentedPickerView(
+      tabs: currentTabs,
+      height: currentHeight,
+      selectedIndex: binding,
+      useLiquidGlass: useLiquidGlass,
+      selectedColor: selectedColor,
+      onSelectionChange: { [weak self] index in
+        self?.currentValue = index
+        self?.onTabChange(["tabIndex": index])
+      }
+    )
+
+    if let existing = hostingController {
+      existing.rootView = rootView
+      return
+    }
+
+    let hosting = UIHostingController(rootView: rootView)
+    hosting.view.backgroundColor = .clear
+    hostingController = hosting
+    hosting.view.translatesAutoresizingMaskIntoConstraints = false
+    addSubview(hosting.view)
+    NSLayoutConstraint.activate([
+      hosting.view.topAnchor.constraint(equalTo: topAnchor),
+      hosting.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+      hosting.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+      hosting.view.bottomAnchor.constraint(equalTo: bottomAnchor),
+    ])
+    if let parentVC = findViewController() {
+      parentVC.addChild(hosting)
+      hosting.didMove(toParent: parentVC)
+    }
+  }
+
+  override public func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window != nil, let hosting = hostingController, hosting.parent == nil,
+       let parentVC = findViewController() {
+      parentVC.addChild(hosting)
+      hosting.didMove(toParent: parentVC)
+    }
+  }
+
+  override public func layoutSubviews() {
+    super.layoutSubviews()
+    hostingController?.view.frame = bounds
+  }
+}
+
+extension UIView {
+  func findViewController() -> UIViewController? {
+    if let nextResponder = next as? UIViewController {
+      return nextResponder
+    }
+    if let nextResponder = next as? UIView {
+      return nextResponder.findViewController()
+    }
+    return nil
+  }
+}
+
+extension UIColor {
+  static func fromHex(_ hex: String) -> UIColor? {
+    var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
+    hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")
+    
+    var rgb: UInt64 = 0
+    
+    guard Scanner(string: hexSanitized).scanHexInt64(&rgb) else {
+      // Try named colors
+      switch hexSanitized.lowercased() {
+      case "red": return .systemRed
+      case "blue": return .systemBlue
+      case "green": return .systemGreen
+      case "orange": return .systemOrange
+      case "purple": return .systemPurple
+      case "pink": return .systemPink
+      case "yellow": return .systemYellow
+      case "teal": return .systemTeal
+      case "indigo": return .systemIndigo
+      default: return nil
+      }
+    }
+    
+    let length = hexSanitized.count
+    if length == 6 {
+      let r = CGFloat((rgb & 0xFF0000) >> 16) / 255.0
+      let g = CGFloat((rgb & 0x00FF00) >> 8) / 255.0
+      let b = CGFloat(rgb & 0x0000FF) / 255.0
+      return UIColor(red: r, green: g, blue: b, alpha: 1.0)
+    } else if length == 8 {
+      let r = CGFloat((rgb & 0xFF000000) >> 24) / 255.0
+      let g = CGFloat((rgb & 0x00FF0000) >> 16) / 255.0
+      let b = CGFloat((rgb & 0x0000FF00) >> 8) / 255.0
+      let a = CGFloat(rgb & 0x000000FF) / 255.0
+      return UIColor(red: r, green: g, blue: b, alpha: a)
+    }
+    
+    return nil
+  }
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "clox-picker",
+  "version": "0.1.1",
+  "description": "Clox Picker native module",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "clox-picker",
+    "CloxPicker"
+  ],
+  "repository": "https://github.com/prolific-life/clox-picker",
+  "bugs": {
+    "url": "https://github.com/prolific-life/clox-picker/issues"
+  },
+  "author": "Yash Saxena <yash.saxena1217@gmail.com> (https://github.com/prolific-life/clox-picker)",
+  "license": "MIT",
+  "homepage": "https://github.com/prolific-life/clox-picker#readme",
+  "engines": {
+    "node": ">=18.14.0 || >=23.0.0"
+  },
+  "dependencies": {
+    "expo": "~54.0.12",
+    "react": "19.1.0",
+    "react-native": "0.81.4"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "@react-native-community/cli": "latest",
+    "expo-module-scripts": "^5.0.7"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "overrides": {
+    "glob": "^9.3.5",
+    "rimraf": "^5.0.0",
+    "pretty-format": "^29.7.0"
+  }
+}

package/src/CloxPicker.types.ts

@@ -0,0 +1,33 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type CloxPickerModuleEvents = {};
+
+/** Single tab item for the segmented picker */
+export interface CloxPickerTab {
+  /** Optional icon (local file or remote URL) */
+  icon?: { uri: string };
+  /** Display label */
+  name: string;
+  /** Stable id (used as key; can match index) */
+  id: number;
+}
+
+export interface CloxPickerViewProps {
+  /** Tab items (icon optional, name, id) */
+  tabs: CloxPickerTab[];
+  /** Height of the picker in points/dp */
+  height: number;
+  /** Current selected tab index */
+  value: number;
+  /** Called when user selects a different tab (passes tab index) */
+  onTabChange?: (event: { tabIndex: number }) => void;
+  /**
+   * iOS only: use Liquid Glass effect when available (iOS 26+).
+   * When false, uses the same non–liquid-glass look on all iOS versions.
+   * Default: true.
+   */
+  useLiquidGlass?: boolean;
+  /** Color for selected tab (hex string, e.g., "#007AFF" or "blue") */
+  selectedColor?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/CloxPickerModule.ts

@@ -0,0 +1,10 @@
+import { NativeModule, requireNativeModule } from 'expo';
+
+import { CloxPickerModuleEvents } from './CloxPicker.types';
+
+declare class CloxPickerModule extends NativeModule<CloxPickerModuleEvents> {
+  getHello(): string;
+  setColorScheme(scheme: 'light' | 'dark' | 'auto'): void;
+}
+
+export default requireNativeModule<CloxPickerModule>('CloxPicker');

package/src/CloxPickerView.tsx

@@ -0,0 +1,12 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+
+import type { CloxPickerViewProps } from './CloxPicker.types';
+
+const NativeCloxPickerView = requireNativeView<CloxPickerViewProps>('CloxPicker');
+
+export function CloxPickerView(props: CloxPickerViewProps) {
+  return <NativeCloxPickerView {...props} />;
+}
+
+export default CloxPickerView;

package/src/index.ts

@@ -0,0 +1,13 @@
+import CloxPickerModule from './CloxPickerModule';
+
+export function getHello(): string {
+  return CloxPickerModule.getHello();
+}
+
+export function setColorScheme(scheme: 'light' | 'dark' | 'auto'): void {
+  CloxPickerModule.setColorScheme(scheme);
+}
+
+export { default as CloxPickerModule } from './CloxPickerModule';
+export { CloxPickerView, default as CloxPickerViewDefault } from './CloxPickerView';
+export * from './CloxPicker.types';

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}