clox-picker 0.1.1

package/.eslintrc.js

@@ -0,0 +1,2 @@
+// @generated by expo-module-scripts
+module.exports = require('expo-module-scripts/eslintrc.base.js');

package/README.md

@@ -0,0 +1,35 @@
+# clox-picker
+
+Clox Picker native module
+
+# API documentation
+
+- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/clox-picker/)
+- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/clox-picker/)
+
+# Installation in managed Expo projects
+
+For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.
+
+# Installation in bare React Native projects
+
+For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
+
+### Add the package to your npm dependencies
+
+```
+npm install clox-picker
+```
+
+### Configure for Android
+
+
+
+
+### Configure for iOS
+
+Run `npx pod-install` after installing the npm package.
+
+# Contributing
+
+Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).

package/android/build.gradle

@@ -0,0 +1,42 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+group = 'expo.modules.cloxpicker'
+version = '1.0.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useExpoPublishing()
+
+android {
+  namespace "expo.modules.cloxpicker"
+  compileSdkVersion 36
+
+  defaultConfig {
+    minSdkVersion 24
+    targetSdkVersion 36
+    versionCode 1
+    versionName "1.0.0"
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+}
+
+dependencies {
+  implementation project(':expo-modules-core')
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.9.23"
+}

package/android/src/main/java/expo/modules/cloxpicker/CloxPickerModule.kt

@@ -0,0 +1,30 @@
+package expo.modules.cloxpicker
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class CloxPickerModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("CloxPicker")
+
+    Function("getHello") {
+      "Hello world"
+    }
+
+    View(CloxPickerView::class) {
+      Prop("tabs") { view: CloxPickerView, tabs: List<Map<String, Any>> ->
+        view.setTabs(tabs)
+      }
+      Prop("height") { view: CloxPickerView, height: Double ->
+        view.setHeight(height)
+      }
+      Prop("value") { view: CloxPickerView, value: Int ->
+        view.setValue(value)
+      }
+      Prop("useLiquidGlass") { view: CloxPickerView, _: Boolean ->
+        // Android: no-op (always non–liquid-glass look)
+      }
+      Events("onTabChange")
+    }
+  }
+}

package/android/src/main/java/expo/modules/cloxpicker/CloxPickerView.kt

@@ -0,0 +1,173 @@
+package expo.modules.cloxpicker
+
+import android.animation.ValueAnimator
+import android.content.Context
+import android.graphics.drawable.GradientDrawable
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.View
+import android.widget.FrameLayout
+import android.widget.LinearLayout
+import android.widget.TextView
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+data class TabItem(val id: Int, val name: String, val iconUri: String?)
+
+class CloxPickerView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+  private val onTabChange by EventDispatcher()
+
+  private var tabs: List<TabItem> = listOf(TabItem(0, "Tab", null))
+  private var pickerHeight: Int = dp(44)
+  private var selectedIndex: Int = 0
+  private var thumbWidth: Int = 0
+  private var thumbHeight: Int = 0
+  private var thumbTop: Int = 0
+
+  private val trackBackground: View
+  private val thumb: View
+  private val segmentsContainer: LinearLayout
+
+  init {
+    setBackgroundColor(0)
+
+    trackBackground = View(context).apply {
+      setBackgroundColor(0xFFEBEBEB.toInt())
+    }
+    addView(trackBackground)
+
+    thumb = View(context).apply {
+      setBackgroundColor(0xFFFFFFFF.toInt() and 0x00FFFFFF or (0.65 * 255).toInt().shl(24))
+    }
+    addView(thumb)
+
+    segmentsContainer = LinearLayout(context).apply {
+      orientation = LinearLayout.HORIZONTAL
+      gravity = Gravity.CENTER_VERTICAL
+    }
+    addView(segmentsContainer)
+  }
+
+  private fun dp(value: Int): Int {
+    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value.toFloat(), resources.displayMetrics).toInt()
+  }
+
+  fun setTabs(tabsList: List<Map<String, Any>>) {
+    tabs = tabsList.mapNotNull { dict ->
+      val name = dict["name"] as? String ?: return@mapNotNull null
+      val id = (dict["id"] as? Number)?.toInt() ?: return@mapNotNull null
+      val icon = (dict["icon"] as? Map<*, *>)?.get("uri") as? String
+      TabItem(id, name, icon)
+    }
+    if (tabs.isEmpty()) tabs = listOf(TabItem(0, "Tab", null))
+    buildSegments()
+  }
+
+  fun setHeight(height: Double) {
+    pickerHeight = dp(height.toInt().coerceIn(24, 96))
+    requestLayout()
+  }
+
+  fun setValue(value: Int) {
+    val newIndex = value.coerceIn(0, (tabs.size - 1).coerceAtLeast(0))
+    if (newIndex != selectedIndex) {
+      selectedIndex = newIndex
+      animateThumbTo(selectedIndex)
+      buildSegments()
+    }
+  }
+
+  private fun buildSegments() {
+    segmentsContainer.removeAllViews()
+    val count = tabs.size.coerceAtLeast(1)
+    for ((index, tab) in tabs.withIndex()) {
+      val textView = TextView(context).apply {
+        text = tab.name
+        setTextSize(TypedValue.COMPLEX_UNIT_SP, 15f)
+        setTextColor(if (index == selectedIndex) 0xFF000000.toInt() else 0xFF8E8E93.toInt())
+        setTypeface(null, if (index == selectedIndex) android.graphics.Typeface.BOLD else android.graphics.Typeface.NORMAL)
+        gravity = Gravity.CENTER
+            layoutParams = LinearLayout.LayoutParams(0, pickerHeight, 1f)
+        setOnClickListener {
+          if (index != selectedIndex) {
+            selectedIndex = index
+            animateThumbTo(selectedIndex)
+            onTabChange(mapOf("tabIndex" to index))
+            buildSegments()
+          }
+        }
+      }
+      segmentsContainer.addView(textView)
+    }
+  }
+
+  private var thumbAnimator: ValueAnimator? = null
+
+  private fun animateThumbTo(index: Int) {
+    thumbAnimator?.cancel()
+    if (width == 0 || thumbWidth == 0) return
+    val count = tabs.size.coerceAtLeast(1)
+    val segmentWidth = width / count
+    val padding = dp(4)
+    val tw = segmentWidth - padding * 2
+    val targetLeft = padding + index * segmentWidth + (segmentWidth - tw) / 2
+
+    val startLeft = thumb.left.toFloat()
+    thumbAnimator = ValueAnimator.ofFloat(startLeft, targetLeft.toFloat()).apply {
+      duration = 250
+      addUpdateListener { anim ->
+        val x = (anim.animatedValue as Float).toInt()
+        thumb.layout(x, thumbTop, x + thumbWidth, thumbTop + thumbHeight)
+      }
+      start()
+    }
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    val w = right - left
+    val h = bottom - top
+    if (w == 0 || h == 0) return
+
+    val count = tabs.size.coerceAtLeast(1)
+    val segmentWidth = w / count
+    val padding = dp(4)
+    val thumbWidth = segmentWidth - padding * 2
+    val thumbHeight = pickerHeight - padding * 2
+    val topOffset = (h - pickerHeight) / 2
+
+    // Track (pill background)
+    (trackBackground.background as? GradientDrawable)?.cornerRadius = (pickerHeight / 2).toFloat()
+    if (trackBackground.background !is GradientDrawable) {
+      trackBackground.background = GradientDrawable().apply {
+        setColor(0xFFEBEBEB.toInt())
+        cornerRadius = (pickerHeight / 2).toFloat()
+      }
+    }
+    trackBackground.layout(0, topOffset, w, topOffset + pickerHeight)
+
+    // Thumb (rounded rect)
+    this.thumbWidth = thumbWidth
+    this.thumbHeight = thumbHeight
+    this.thumbTop = topOffset + padding
+    val thumbLeft = padding + selectedIndex * segmentWidth + (segmentWidth - thumbWidth) / 2
+    if (thumb.background !is GradientDrawable) {
+      thumb.background = GradientDrawable().apply {
+        setColor(0xFFFFFFFF.toInt() and 0x00FFFFFF or (0.65 * 255).toInt().shl(24))
+        cornerRadius = (thumbHeight / 2).toFloat()
+      }
+    }
+    thumb.layout(thumbLeft, thumbTop, thumbLeft + thumbWidth, thumbTop + thumbHeight)
+
+    // Segments container
+    segmentsContainer.layout(0, topOffset, w, topOffset + pickerHeight)
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    val h = View.resolveSize(pickerHeight, heightMeasureSpec)
+    val w = View.getDefaultSize(suggestedMinimumWidth, widthMeasureSpec)
+    setMeasuredDimension(w, h)
+  }
+}

package/build/CloxPicker.types.d.ts

@@ -0,0 +1,35 @@
+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>;
+}
+//# sourceMappingURL=CloxPicker.types.d.ts.map

package/build/CloxPicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloxPicker.types.d.ts","sourceRoot":"","sources":["../src/CloxPicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAExC,+CAA+C;AAC/C,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACvB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,0CAA0C;IAC1C,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}

package/build/CloxPicker.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CloxPicker.types.js.map

package/build/CloxPicker.types.js.map

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

package/build/CloxPickerModule.d.ts

@@ -0,0 +1,9 @@
+import { NativeModule } from 'expo';
+import { CloxPickerModuleEvents } from './CloxPicker.types';
+declare class CloxPickerModule extends NativeModule<CloxPickerModuleEvents> {
+    getHello(): string;
+    setColorScheme(scheme: 'light' | 'dark' | 'auto'): void;
+}
+declare const _default: CloxPickerModule;
+export default _default;
+//# sourceMappingURL=CloxPickerModule.d.ts.map

package/build/CloxPickerModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloxPickerModule.d.ts","sourceRoot":"","sources":["../src/CloxPickerModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,MAAM,CAAC;AAEzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,OAAO,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACzE,QAAQ,IAAI,MAAM;IAClB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;CACxD;;AAED,wBAAmE"}

package/build/CloxPickerModule.js

@@ -0,0 +1,3 @@
+import { requireNativeModule } from 'expo';
+export default requireNativeModule('CloxPicker');
+//# sourceMappingURL=CloxPickerModule.js.map

package/build/CloxPickerModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloxPickerModule.js","sourceRoot":"","sources":["../src/CloxPickerModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,mBAAmB,EAAE,MAAM,MAAM,CAAC;AASzD,eAAe,mBAAmB,CAAmB,YAAY,CAAC,CAAC","sourcesContent":["import { NativeModule, requireNativeModule } from 'expo';\n\nimport { CloxPickerModuleEvents } from './CloxPicker.types';\n\ndeclare class CloxPickerModule extends NativeModule<CloxPickerModuleEvents> {\n  getHello(): string;\n  setColorScheme(scheme: 'light' | 'dark' | 'auto'): void;\n}\n\nexport default requireNativeModule<CloxPickerModule>('CloxPicker');\n"]}

package/build/CloxPickerView.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { CloxPickerViewProps } from './CloxPicker.types';
+export declare function CloxPickerView(props: CloxPickerViewProps): React.JSX.Element;
+export default CloxPickerView;
+//# sourceMappingURL=CloxPickerView.d.ts.map

package/build/CloxPickerView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloxPickerView.d.ts","sourceRoot":"","sources":["../src/CloxPickerView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAI9D,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAExD;AAED,eAAe,cAAc,CAAC"}

package/build/CloxPickerView.js

@@ -0,0 +1,8 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+const NativeCloxPickerView = requireNativeView('CloxPicker');
+export function CloxPickerView(props) {
+    return <NativeCloxPickerView {...props}/>;
+}
+export default CloxPickerView;
+//# sourceMappingURL=CloxPickerView.js.map

package/build/CloxPickerView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloxPickerView.js","sourceRoot":"","sources":["../src/CloxPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,oBAAoB,GAAG,iBAAiB,CAAsB,YAAY,CAAC,CAAC;AAElF,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,OAAO,CAAC,oBAAoB,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC7C,CAAC;AAED,eAAe,cAAc,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\n\nimport type { CloxPickerViewProps } from './CloxPicker.types';\n\nconst NativeCloxPickerView = requireNativeView<CloxPickerViewProps>('CloxPicker');\n\nexport function CloxPickerView(props: CloxPickerViewProps) {\n  return <NativeCloxPickerView {...props} />;\n}\n\nexport default CloxPickerView;\n"]}

package/build/index.d.ts

@@ -0,0 +1,6 @@
+export declare function getHello(): string;
+export declare function setColorScheme(scheme: 'light' | 'dark' | 'auto'): void;
+export { default as CloxPickerModule } from './CloxPickerModule';
+export { CloxPickerView, default as CloxPickerViewDefault } from './CloxPickerView';
+export * from './CloxPicker.types';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,IAAI,MAAM,CAEjC;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAEtE;AAED,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACpF,cAAc,oBAAoB,CAAC"}

package/build/index.js

@@ -0,0 +1,11 @@
+import CloxPickerModule from './CloxPickerModule';
+export function getHello() {
+    return CloxPickerModule.getHello();
+}
+export function setColorScheme(scheme) {
+    CloxPickerModule.setColorScheme(scheme);
+}
+export { default as CloxPickerModule } from './CloxPickerModule';
+export { CloxPickerView, default as CloxPickerViewDefault } from './CloxPickerView';
+export * from './CloxPicker.types';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,MAAM,UAAU,QAAQ;IACtB,OAAO,gBAAgB,CAAC,QAAQ,EAAE,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,MAAiC;IAC9D,gBAAgB,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC1C,CAAC;AAED,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACpF,cAAc,oBAAoB,CAAC","sourcesContent":["import CloxPickerModule from './CloxPickerModule';\n\nexport function getHello(): string {\n  return CloxPickerModule.getHello();\n}\n\nexport function setColorScheme(scheme: 'light' | 'dark' | 'auto'): void {\n  CloxPickerModule.setColorScheme(scheme);\n}\n\nexport { default as CloxPickerModule } from './CloxPickerModule';\nexport { CloxPickerView, default as CloxPickerViewDefault } from './CloxPickerView';\nexport * from './CloxPicker.types';\n"]}

package/example/App.tsx

@@ -0,0 +1,158 @@
+import {
+  CloxPickerView,
+  setColorScheme,
+  type CloxPickerTab,
+} from 'clox-picker';
+import React, { useState, useEffect } from 'react';
+import {
+  Appearance,
+  Button,
+  Image,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+
+const DEFAULT_TABS: CloxPickerTab[] = [
+  { id: 0, name: 'All', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/play.png' } },
+  { id: 1, name: 'Calendar', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/upload.png' } },
+  { id: 2, name: 'Planning', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/male.png' } },
+  { id: 3, name: 'Explore', icon: { uri: 'https://cronoz-assets.s3.us-west-2.amazonaws.com/icons/female.png' } },
+];
+
+const PICKER_HEIGHT = 90;
+
+export default function App() {
+  const {width, height} = useWindowDimensions();
+  const colorScheme = useColorScheme();
+  const [liquidIndex, setLiquidIndex] = useState(0);
+  const [standardIndex, setStandardIndex] = useState(0);
+  const [androidIndex, setAndroidIndex] = useState(0);
+  const [currentScheme, setCurrentScheme] = useState<'light' | 'dark' | null>(null);
+
+  useEffect(() => {
+    setCurrentScheme(colorScheme || 'light');
+  }, [colorScheme]);
+
+  const toggleColorScheme = () => {
+    const newScheme = currentScheme === 'light' ? 'dark' : 'light';
+    setCurrentScheme(newScheme);
+    
+    if (Platform.OS === 'ios') {
+      // Use native module to change color scheme
+      setColorScheme(newScheme);
+    } else {
+      // On Android, use Appearance API
+      Appearance.setColorScheme(newScheme);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: 'https://picsum.photos/800/1600?random=' + Date.now() }}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: width,  
+          height: height,
+        }}
+        resizeMode="cover"
+      />
+      <View style={styles.toggleContainer}>
+        <Button
+          title={`Toggle Theme (Current: ${currentScheme === 'dark' ? 'Dark' : 'Light'})`}
+          onPress={toggleColorScheme}
+        />
+      </View>
+      <ScrollView
+        contentContainerStyle={styles.container}
+        style={styles.scroll}
+      >
+        {Platform.OS === 'ios' && (
+          <View style={{ width: 400 }}>
+            <Text style={styles.title}>Liquid Glass (iOS)</Text>
+            <View style={styles.pickerWrap}>
+              <CloxPickerView
+                tabs={DEFAULT_TABS}
+                height={PICKER_HEIGHT}
+                value={liquidIndex}
+                useLiquidGlass={true}
+                selectedColor="#FF6B6B"
+                onTabChange={({ tabIndex }) => setLiquidIndex(tabIndex)}
+                style={styles.picker}
+              />
+            </View>
+
+            <Text style={styles.title}>Standard (no liquid glass)</Text>
+            <View style={styles.pickerWrap}>
+              <CloxPickerView
+                tabs={DEFAULT_TABS}
+                height={PICKER_HEIGHT}
+                value={standardIndex}
+                useLiquidGlass={false}
+                selectedColor="#4ECDC4"
+                onTabChange={({ tabIndex }) => setStandardIndex(tabIndex)}
+                style={styles.picker}
+              />
+            </View>
+          </View>
+        )}
+
+        {Platform.OS === 'android' && (
+          <>
+            <Text style={styles.title}>Segmented Picker</Text>
+            <View style={styles.pickerWrap}>
+              <CloxPickerView
+                tabs={DEFAULT_TABS}
+                height={PICKER_HEIGHT}
+                value={androidIndex}
+                onTabChange={({ tabIndex }) => setAndroidIndex(tabIndex)}
+                style={styles.picker}
+              />
+            </View>
+          </>
+        )}
+      </ScrollView>
+
+    </View>
+
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1 },
+  container: {
+    flexGrow: 1,
+    paddingVertical: 48,
+    alignItems: 'center',
+  },
+  toggleContainer: {
+    position: 'absolute',
+    top: 60,
+    right: 20,
+    zIndex: 1000,
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    borderRadius: 8,
+    padding: 8,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 12,
+    marginTop: 24,
+  },
+  pickerWrap: {
+    width: '100%',
+    height: PICKER_HEIGHT, // Give native view explicit height so `height` prop is respected
+  },
+  picker: {
+    width: '100%',
+    height: PICKER_HEIGHT,
+  },
+});