react-native-kookit 0.1.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+};

package/README.md

@@ -0,0 +1,35 @@
+# react-native-kookit
+
+My new module
+
+# API documentation
+
+- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/react-native-kookit/)
+- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/react-native-kookit/)
+
+# 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 react-native-kookit
+```
+
+### 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,43 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.kookit'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 34)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 21)
+      targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.kookit"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

package/android/src/main/java/expo/modules/kookit/ReactNativeKookitModule.kt

@@ -0,0 +1,114 @@
+package expo.modules.kookit
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import android.app.Activity
+import android.content.Context
+import android.media.AudioManager
+import android.view.KeyEvent
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.exception.Exceptions
+import java.net.URL
+
+class ReactNativeKookitModule : Module() {
+  private var isVolumeListenerEnabled = false
+  private var audioManager: AudioManager? = null
+  private var originalStreamVolume: Int = 0
+
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  override fun definition() = ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('ReactNativeKookit')` in JavaScript.
+    Name("ReactNativeKookit")
+
+    // Sets constant properties on the module. Can take a dictionary or a closure that returns a dictionary.
+    Constants(
+      "PI" to Math.PI
+    )
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange", "onVolumeButtonPressed")
+
+    // Function to enable volume key interception
+    Function("enableVolumeKeyInterception") {
+      enableVolumeKeyInterception()
+    }
+
+    // Function to disable volume key interception
+    Function("disableVolumeKeyInterception") {
+      disableVolumeKeyInterception()
+    }
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      "Hello world! !👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { value: String ->
+      // Send an event to JavaScript.
+      sendEvent("onChange", mapOf(
+        "value" to value
+      ))
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of
+    // the view definition: Prop, Events.
+    View(ReactNativeKookitView::class) {
+      // Defines a setter for the `url` prop.
+      Prop("url") { view: ReactNativeKookitView, url: URL ->
+        view.webView.loadUrl(url.toString())
+      }
+      // Defines an event that the view can send to JavaScript.
+      Events("onLoad")
+    }
+  }
+
+  private fun enableVolumeKeyInterception() {
+    try {
+      val context = appContext.reactContext ?: throw Exceptions.ReactContextLost()
+      audioManager = context.getSystemService(Context.AUDIO_SERVICE) as AudioManager
+      
+      // Store original volume to restore later if needed
+      originalStreamVolume = audioManager?.getStreamVolume(AudioManager.STREAM_MUSIC) ?: 0
+      
+      isVolumeListenerEnabled = true
+      
+      // Install key event interceptor at the application level
+      val activity = appContext.currentActivity
+      activity?.let { act ->
+        VolumeKeyInterceptor.install(act) { keyCode ->
+          val keyType = when (keyCode) {
+            KeyEvent.KEYCODE_VOLUME_UP -> "up"
+            KeyEvent.KEYCODE_VOLUME_DOWN -> "down"
+            else -> "unknown"
+          }
+          sendEvent("onVolumeButtonPressed", mapOf("key" to keyType))
+        }
+      }
+      
+    } catch (e: Exception) {
+      throw Exceptions.ReactContextLost()
+    }
+  }
+
+  private fun disableVolumeKeyInterception() {
+    try {
+      isVolumeListenerEnabled = false
+      
+      val activity = appContext.currentActivity
+      activity?.let { act ->
+        VolumeKeyInterceptor.uninstall(act)
+      }
+      
+      audioManager = null
+      
+    } catch (e: Exception) {
+      // Context might be lost, ignore
+    }
+  }
+}

package/android/src/main/java/expo/modules/kookit/ReactNativeKookitView.kt

@@ -0,0 +1,30 @@
+package expo.modules.kookit
+
+import android.content.Context
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class ReactNativeKookitView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  // Creates and initializes an event dispatcher for the `onLoad` event.
+  // The name of the event is inferred from the value and needs to match the event name defined in the module.
+  private val onLoad by EventDispatcher()
+
+  // Defines a WebView that will be used as the root subview.
+  internal val webView = WebView(context).apply {
+    layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+    webViewClient = object : WebViewClient() {
+      override fun onPageFinished(view: WebView, url: String) {
+        // Sends an event to JavaScript. Triggers a callback defined on the view component in JavaScript.
+        onLoad(mapOf("url" to url))
+      }
+    }
+  }
+
+  init {
+    // Adds the WebView to the view hierarchy.
+    addView(webView)
+  }
+}

package/android/src/main/java/expo/modules/kookit/VolumeKeyInterceptActivity.kt

@@ -0,0 +1,67 @@
+package expo.modules.kookit
+
+import android.app.Activity
+import android.view.KeyEvent
+import java.lang.ref.WeakReference
+
+object VolumeKeyInterceptor {
+    private var activityRef: WeakReference<Activity>? = null
+    private var keyListener: ((Int) -> Unit)? = null
+    private var isEnabled = false
+    
+    fun install(activity: Activity, listener: (Int) -> Unit) {
+        activityRef = WeakReference(activity)
+        keyListener = listener
+        isEnabled = true
+        
+        // Override the activity's dispatchKeyEvent method
+        if (activity is VolumeKeyInterceptActivity) {
+            activity.setVolumeKeyInterceptEnabled(true)
+            activity.setVolumeKeyListener(listener)
+        } else {
+            // Try to use reflection or other methods if the activity doesn't implement the interface
+            installFallback(activity, listener)
+        }
+    }
+    
+    fun uninstall(activity: Activity) {
+        isEnabled = false
+        keyListener = null
+        
+        if (activity is VolumeKeyInterceptActivity) {
+            activity.setVolumeKeyInterceptEnabled(false)
+            activity.setVolumeKeyListener(null)
+        }
+        
+        activityRef = null
+    }
+    
+    private fun installFallback(activity: Activity, listener: (Int) -> Unit) {
+        // For activities that don't implement VolumeKeyInterceptActivity
+        // We'll need the developer to manually add the key handling
+    }
+    
+    fun handleKeyEvent(event: KeyEvent): Boolean {
+        if (!isEnabled) return false
+        
+        return when (event.keyCode) {
+            KeyEvent.KEYCODE_VOLUME_UP, KeyEvent.KEYCODE_VOLUME_DOWN -> {
+                if (event.action == KeyEvent.ACTION_DOWN) {
+                    keyListener?.invoke(event.keyCode)
+                }
+                true // Consume the event to prevent system volume change and HUD
+            }
+            else -> false
+        }
+    }
+}
+
+interface VolumeKeyInterceptActivity {
+    fun setVolumeKeyListener(listener: ((Int) -> Unit)?)
+    fun setVolumeKeyInterceptEnabled(enabled: Boolean)
+}
+
+// Extension function to help activities implement volume key interception
+fun Activity.handleVolumeKeyEvent(event: KeyEvent): Boolean {
+    return VolumeKeyInterceptor.handleKeyEvent(event)
+}

package/build/ReactNativeKookit.types.d.ts

@@ -0,0 +1,22 @@
+import type { StyleProp, ViewStyle } from "react-native";
+export type OnLoadEventPayload = {
+    url: string;
+};
+export type VolumeKeyEventPayload = {
+    key: "up" | "down";
+};
+export type ReactNativeKookitModuleEvents = {
+    onChange: (params: ChangeEventPayload) => void;
+    onVolumeButtonPressed: (params: VolumeKeyEventPayload) => void;
+};
+export type ChangeEventPayload = {
+    value: string;
+};
+export type ReactNativeKookitViewProps = {
+    url: string;
+    onLoad: (event: {
+        nativeEvent: OnLoadEventPayload;
+    }) => void;
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=ReactNativeKookit.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookit.types.d.ts","sourceRoot":"","sources":["../src/ReactNativeKookit.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,IAAI,GAAG,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,qBAAqB,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,kBAAkB,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

package/build/ReactNativeKookit.types.js

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

package/build/ReactNativeKookit.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookit.types.js","sourceRoot":"","sources":["../src/ReactNativeKookit.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from \"react-native\";\n\nexport type OnLoadEventPayload = {\n  url: string;\n};\n\nexport type VolumeKeyEventPayload = {\n  key: \"up\" | \"down\";\n};\n\nexport type ReactNativeKookitModuleEvents = {\n  onChange: (params: ChangeEventPayload) => void;\n  onVolumeButtonPressed: (params: VolumeKeyEventPayload) => void;\n};\n\nexport type ChangeEventPayload = {\n  value: string;\n};\n\nexport type ReactNativeKookitViewProps = {\n  url: string;\n  onLoad: (event: { nativeEvent: OnLoadEventPayload }) => void;\n  style?: StyleProp<ViewStyle>;\n};\n"]}

package/build/ReactNativeKookitModule.d.ts

@@ -0,0 +1,12 @@
+import { NativeModule } from "expo";
+import { ReactNativeKookitModuleEvents } from "./ReactNativeKookit.types";
+declare class ReactNativeKookitModule extends NativeModule<ReactNativeKookitModuleEvents> {
+    PI: number;
+    hello(): string;
+    setValueAsync(value: string): Promise<void>;
+    enableVolumeKeyInterception(): void;
+    disableVolumeKeyInterception(): void;
+}
+declare const _default: ReactNativeKookitModule;
+export default _default;
+//# sourceMappingURL=ReactNativeKookitModule.d.ts.map

package/build/ReactNativeKookitModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookitModule.d.ts","sourceRoot":"","sources":["../src/ReactNativeKookitModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,MAAM,CAAC;AAEzD,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E,OAAO,OAAO,uBAAwB,SAAQ,YAAY,CAAC,6BAA6B,CAAC;IACvF,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,IAAI,MAAM;IACf,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAC3C,2BAA2B,IAAI,IAAI;IACnC,4BAA4B,IAAI,IAAI;CACrC;;AAGD,wBAEE"}

package/build/ReactNativeKookitModule.js

@@ -0,0 +1,4 @@
+import { requireNativeModule } from "expo";
+// This call loads the native module object from the JSI.
+export default requireNativeModule("ReactNativeKookit");
+//# sourceMappingURL=ReactNativeKookitModule.js.map

package/build/ReactNativeKookitModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookitModule.js","sourceRoot":"","sources":["../src/ReactNativeKookitModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,mBAAmB,EAAE,MAAM,MAAM,CAAC;AAYzD,yDAAyD;AACzD,eAAe,mBAAmB,CAChC,mBAAmB,CACpB,CAAC","sourcesContent":["import { NativeModule, requireNativeModule } from \"expo\";\n\nimport { ReactNativeKookitModuleEvents } from \"./ReactNativeKookit.types\";\n\ndeclare class ReactNativeKookitModule extends NativeModule<ReactNativeKookitModuleEvents> {\n  PI: number;\n  hello(): string;\n  setValueAsync(value: string): Promise<void>;\n  enableVolumeKeyInterception(): void;\n  disableVolumeKeyInterception(): void;\n}\n\n// This call loads the native module object from the JSI.\nexport default requireNativeModule<ReactNativeKookitModule>(\n  \"ReactNativeKookit\"\n);\n"]}

package/build/ReactNativeKookitModule.web.d.ts

@@ -0,0 +1,13 @@
+import { NativeModule } from "expo";
+import { ReactNativeKookitModuleEvents } from "./ReactNativeKookit.types";
+declare class ReactNativeKookitModule extends NativeModule<ReactNativeKookitModuleEvents> {
+    PI: number;
+    setValueAsync(value: string): Promise<void>;
+    hello(): string;
+    enableVolumeKeyInterception(): void;
+    disableVolumeKeyInterception(): void;
+    private handleKeyDown;
+}
+declare const _default: typeof ReactNativeKookitModule;
+export default _default;
+//# sourceMappingURL=ReactNativeKookitModule.web.d.ts.map

package/build/ReactNativeKookitModule.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookitModule.web.d.ts","sourceRoot":"","sources":["../src/ReactNativeKookitModule.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,MAAM,MAAM,CAAC;AAEvD,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E,cAAM,uBAAwB,SAAQ,YAAY,CAAC,6BAA6B,CAAC;IAC/E,EAAE,SAAW;IACP,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAGjD,KAAK;IAGL,2BAA2B;IAO3B,4BAA4B;IAO5B,OAAO,CAAC,aAAa;CAgBtB;;AAED,wBAGE"}

package/build/ReactNativeKookitModule.web.js

@@ -0,0 +1,40 @@
+import { registerWebModule, NativeModule } from "expo";
+class ReactNativeKookitModule extends NativeModule {
+    PI = Math.PI;
+    async setValueAsync(value) {
+        this.emit("onChange", { value });
+    }
+    hello() {
+        return "Hello world! 👋";
+    }
+    enableVolumeKeyInterception() {
+        // Web implementation - listen for keyboard events
+        if (typeof window !== "undefined") {
+            this.handleKeyDown = this.handleKeyDown.bind(this);
+            window.addEventListener("keydown", this.handleKeyDown);
+        }
+    }
+    disableVolumeKeyInterception() {
+        // Web implementation - remove keyboard event listeners
+        if (typeof window !== "undefined" && this.handleKeyDown) {
+            window.removeEventListener("keydown", this.handleKeyDown);
+        }
+    }
+    handleKeyDown(event) {
+        // On web, we can simulate volume key detection using specific keys
+        // This is a fallback since web doesn't have direct access to volume keys
+        let keyType = null;
+        if (event.code === "ArrowUp" && event.altKey) {
+            keyType = "up";
+        }
+        else if (event.code === "ArrowDown" && event.altKey) {
+            keyType = "down";
+        }
+        if (keyType) {
+            event.preventDefault();
+            this.emit("onVolumeButtonPressed", { key: keyType });
+        }
+    }
+}
+export default registerWebModule(ReactNativeKookitModule, "ReactNativeKookitModule");
+//# sourceMappingURL=ReactNativeKookitModule.web.js.map

package/build/ReactNativeKookitModule.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookitModule.web.js","sourceRoot":"","sources":["../src/ReactNativeKookitModule.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAIvD,MAAM,uBAAwB,SAAQ,YAA2C;IAC/E,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,aAAa,CAAC,KAAa;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACnC,CAAC;IACD,KAAK;QACH,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IACD,2BAA2B;QACzB,kDAAkD;QAClD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACnD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,CAAC;IACH,CAAC;IACD,4BAA4B;QAC1B,uDAAuD;QACvD,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACxD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,mEAAmE;QACnE,yEAAyE;QACzE,IAAI,OAAO,GAAyB,IAAI,CAAC;QAEzC,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YAC7C,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACtD,OAAO,GAAG,MAAM,CAAC;QACnB,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;CACF;AAED,eAAe,iBAAiB,CAC9B,uBAAuB,EACvB,yBAAyB,CAC1B,CAAC","sourcesContent":["import { registerWebModule, NativeModule } from \"expo\";\n\nimport { ReactNativeKookitModuleEvents } from \"./ReactNativeKookit.types\";\n\nclass ReactNativeKookitModule extends NativeModule<ReactNativeKookitModuleEvents> {\n  PI = Math.PI;\n  async setValueAsync(value: string): Promise<void> {\n    this.emit(\"onChange\", { value });\n  }\n  hello() {\n    return \"Hello world! 👋\";\n  }\n  enableVolumeKeyInterception() {\n    // Web implementation - listen for keyboard events\n    if (typeof window !== \"undefined\") {\n      this.handleKeyDown = this.handleKeyDown.bind(this);\n      window.addEventListener(\"keydown\", this.handleKeyDown);\n    }\n  }\n  disableVolumeKeyInterception() {\n    // Web implementation - remove keyboard event listeners\n    if (typeof window !== \"undefined\" && this.handleKeyDown) {\n      window.removeEventListener(\"keydown\", this.handleKeyDown);\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // On web, we can simulate volume key detection using specific keys\n    // This is a fallback since web doesn't have direct access to volume keys\n    let keyType: \"up\" | \"down\" | null = null;\n\n    if (event.code === \"ArrowUp\" && event.altKey) {\n      keyType = \"up\";\n    } else if (event.code === \"ArrowDown\" && event.altKey) {\n      keyType = \"down\";\n    }\n\n    if (keyType) {\n      event.preventDefault();\n      this.emit(\"onVolumeButtonPressed\", { key: keyType });\n    }\n  }\n}\n\nexport default registerWebModule(\n  ReactNativeKookitModule,\n  \"ReactNativeKookitModule\"\n);\n"]}

package/build/ReactNativeKookitView.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ReactNativeKookitViewProps } from './ReactNativeKookit.types';
+export default function ReactNativeKookitView(props: ReactNativeKookitViewProps): React.JSX.Element;
+//# sourceMappingURL=ReactNativeKookitView.d.ts.map

package/build/ReactNativeKookitView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookitView.d.ts","sourceRoot":"","sources":["../src/ReactNativeKookitView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAKvE,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAE9E"}

package/build/ReactNativeKookitView.js

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

package/build/ReactNativeKookitView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookitView.js","sourceRoot":"","sources":["../src/ReactNativeKookitView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,UAAU,GACd,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAEzC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAiC;IAC7E,OAAO,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACnC,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\n\nimport { ReactNativeKookitViewProps } from './ReactNativeKookit.types';\n\nconst NativeView: React.ComponentType<ReactNativeKookitViewProps> =\n  requireNativeView('ReactNativeKookit');\n\nexport default function ReactNativeKookitView(props: ReactNativeKookitViewProps) {\n  return <NativeView {...props} />;\n}\n"]}

package/build/ReactNativeKookitView.web.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ReactNativeKookitViewProps } from './ReactNativeKookit.types';
+export default function ReactNativeKookitView(props: ReactNativeKookitViewProps): React.JSX.Element;
+//# sourceMappingURL=ReactNativeKookitView.web.d.ts.map

package/build/ReactNativeKookitView.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookitView.web.d.ts","sourceRoot":"","sources":["../src/ReactNativeKookitView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAEvE,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAU9E"}

package/build/ReactNativeKookitView.web.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export default function ReactNativeKookitView(props) {
+    return (<div>
+      <iframe style={{ flex: 1 }} src={props.url} onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}/>
+    </div>);
+}
+//# sourceMappingURL=ReactNativeKookitView.web.js.map

package/build/ReactNativeKookitView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeKookitView.web.js","sourceRoot":"","sources":["../src/ReactNativeKookitView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAiC;IAC7E,OAAO,CACL,CAAC,GAAG,CACF;MAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACnB,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CACf,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAEpE;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { ReactNativeKookitViewProps } from './ReactNativeKookit.types';\n\nexport default function ReactNativeKookitView(props: ReactNativeKookitViewProps) {\n  return (\n    <div>\n      <iframe\n        style={{ flex: 1 }}\n        src={props.url}\n        onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}\n      />\n    </div>\n  );\n}\n"]}

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './ReactNativeKookitModule';
+export { default as ReactNativeKookitView } from './ReactNativeKookitView';
+export * from './ReactNativeKookit.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,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,cAAe,2BAA2B,CAAC"}

package/build/index.js

@@ -0,0 +1,6 @@
+// Reexport the native module. On web, it will be resolved to ReactNativeKookitModule.web.ts
+// and on native platforms to ReactNativeKookitModule.ts
+export { default } from './ReactNativeKookitModule';
+export { default as ReactNativeKookitView } from './ReactNativeKookitView';
+export * from './ReactNativeKookit.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,4FAA4F;AAC5F,wDAAwD;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,cAAe,2BAA2B,CAAC","sourcesContent":["// Reexport the native module. On web, it will be resolved to ReactNativeKookitModule.web.ts\n// and on native platforms to ReactNativeKookitModule.ts\nexport { default } from './ReactNativeKookitModule';\nexport { default as ReactNativeKookitView } from './ReactNativeKookitView';\nexport * from  './ReactNativeKookit.types';\n"]}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android", "web"],
+  "apple": {
+    "modules": ["ReactNativeKookitModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.kookit.ReactNativeKookitModule"]
+  }
+}

package/ios/ReactNativeKookit.podspec

@@ -0,0 +1,29 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'ReactNativeKookit'
+  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.4'
+  s.source         = { git: 'https://github.com/troyeguo/react-native-kookit' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/ReactNativeKookitModule.swift

@@ -0,0 +1,156 @@
+import ExpoModulesCore
+import MediaPlayer
+import AVFoundation
+
+public class ReactNativeKookitModule: Module {
+  private var volumeView: MPVolumeView?
+  private var isVolumeListenerEnabled = false
+  private var initialVolume: Float = 0.5
+  
+  public func definition() -> ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('ReactNativeKookit')` in JavaScript.
+    Name("ReactNativeKookit")
+
+    // Sets constant properties on the module. Can take a dictionary or a closure that returns a dictionary.
+    Constants([
+      "PI": Double.pi
+    ])
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange", "onVolumeButtonPressed")
+
+    // Function to enable volume key interception
+    Function("enableVolumeKeyInterception") {
+      self.enableVolumeKeyInterception()
+    }
+
+    // Function to disable volume key interception
+    Function("disableVolumeKeyInterception") {
+      self.disableVolumeKeyInterception()
+    }
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { (value: String) in
+      // Send an event to JavaScript.
+      self.sendEvent("onChange", [
+        "value": value
+      ])
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of the
+    // view definition: Prop, Events.
+    View(ReactNativeKookitView.self) {
+      // Defines a setter for the `url` prop.
+      Prop("url") { (view: ReactNativeKookitView, url: URL) in
+        if view.webView.url != url {
+          view.webView.load(URLRequest(url: url))
+        }
+      }
+
+      Events("onLoad")
+    }
+  }
+  
+  private func enableVolumeKeyInterception() {
+    guard !isVolumeListenerEnabled else { return }
+    
+    isVolumeListenerEnabled = true
+    
+    // Store initial volume to restore it later
+    initialVolume = AVAudioSession.sharedInstance().outputVolume
+    
+    // Create a hidden MPVolumeView to intercept volume button presses
+    volumeView = MPVolumeView(frame: CGRect(x: -2000, y: -2000, width: 1, height: 1))
+    volumeView?.showsVolumeSlider = true  // Need to show slider to intercept
+    volumeView?.showsRouteButton = false
+    volumeView?.isUserInteractionEnabled = false
+    volumeView?.alpha = 0.01  // Make it almost invisible
+    volumeView?.clipsToBounds = true
+    
+    // Add to main window and make sure it's hidden
+    if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
+       let window = windowScene.windows.first {
+      window.addSubview(volumeView!)
+      volumeView?.isHidden = false
+    }
+    
+    // Listen for volume changes using KVO
+    AVAudioSession.sharedInstance().addObserver(
+      self,
+      forKeyPath: "outputVolume",
+      options: [.new, .old],
+      context: nil
+    )
+    
+    // Also use notification as backup
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(systemVolumeChanged),
+      name: NSNotification.Name(rawValue: "AVSystemController_SystemVolumeDidChangeNotification"),
+      object: nil
+    )
+  }
+  
+  private func disableVolumeKeyInterception() {
+    guard isVolumeListenerEnabled else { return }
+    
+    isVolumeListenerEnabled = false
+    
+    // Remove KVO observer
+    AVAudioSession.sharedInstance().removeObserver(self, forKeyPath: "outputVolume")
+    
+    // Remove volume view
+    volumeView?.removeFromSuperview()
+    volumeView = nil
+    
+    // Remove notification observers
+    NotificationCenter.default.removeObserver(self)
+  }
+  
+  override public func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
+    guard isVolumeListenerEnabled,
+          keyPath == "outputVolume",
+          let change = change else { return }
+    
+    let newVolume = change[.newKey] as? Float ?? initialVolume
+    let oldVolume = change[.oldKey] as? Float ?? initialVolume
+    
+    // Determine direction
+    let keyType: String
+    if newVolume > oldVolume {
+      keyType = "up"
+    } else if newVolume < oldVolume {
+      keyType = "down"
+    } else {
+      return // No change
+    }
+    
+    // Reset volume to initial value to prevent actual volume change
+    DispatchQueue.main.async {
+      // Find the volume slider and set it back
+      if let volumeSlider = self.volumeView?.subviews.compactMap({ $0 as? UISlider }).first {
+        volumeSlider.setValue(self.initialVolume, animated: false)
+      }
+    }
+    
+    // Send event to JavaScript
+    sendEvent("onVolumeButtonPressed", [
+      "key": keyType
+    ])
+  }
+  
+  @objc private func systemVolumeChanged(_ notification: Notification) {
+    // This is a backup method in case KVO doesn't work
+    guard isVolumeListenerEnabled else { return }
+    
+    // The main logic is handled in observeValue
+  }
+}

package/ios/ReactNativeKookitView.swift

@@ -0,0 +1,38 @@
+import ExpoModulesCore
+import WebKit
+
+// This view will be used as a native component. Make sure to inherit from `ExpoView`
+// to apply the proper styling (e.g. border radius and shadows).
+class ReactNativeKookitView: ExpoView {
+  let webView = WKWebView()
+  let onLoad = EventDispatcher()
+  var delegate: WebViewDelegate?
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    delegate = WebViewDelegate { url in
+      self.onLoad(["url": url])
+    }
+    webView.navigationDelegate = delegate
+    addSubview(webView)
+  }
+
+  override func layoutSubviews() {
+    webView.frame = bounds
+  }
+}
+
+class WebViewDelegate: NSObject, WKNavigationDelegate {
+  let onUrlChange: (String) -> Void
+
+  init(onUrlChange: @escaping (String) -> Void) {
+    self.onUrlChange = onUrlChange
+  }
+
+  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation) {
+    if let url = webView.url {
+      onUrlChange(url.absoluteString)
+    }
+  }
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-native-kookit",
+  "version": "0.1.0",
+  "description": "My new 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"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "react-native-kookit",
+    "ReactNativeKookit"
+  ],
+  "repository": "https://github.com/troyeguo/react-native-kookit",
+  "bugs": {
+    "url": "https://github.com/troyeguo/react-native-kookit/issues"
+  },
+  "author": "troyeguo <13820674+troyeguo@users.noreply.github.com> (https://github.com/troyeguo)",
+  "license": "MIT",
+  "homepage": "https://github.com/troyeguo/react-native-kookit#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "~19.0.0",
+    "expo-module-scripts": "^4.1.10",
+    "expo": "~53.0.0",
+    "react-native": "0.79.1"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

package/src/ReactNativeKookit.types.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export type OnLoadEventPayload = {
+  url: string;
+};
+
+export type VolumeKeyEventPayload = {
+  key: "up" | "down";
+};
+
+export type ReactNativeKookitModuleEvents = {
+  onChange: (params: ChangeEventPayload) => void;
+  onVolumeButtonPressed: (params: VolumeKeyEventPayload) => void;
+};
+
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type ReactNativeKookitViewProps = {
+  url: string;
+  onLoad: (event: { nativeEvent: OnLoadEventPayload }) => void;
+  style?: StyleProp<ViewStyle>;
+};

package/src/ReactNativeKookitModule.ts

@@ -0,0 +1,16 @@
+import { NativeModule, requireNativeModule } from "expo";
+
+import { ReactNativeKookitModuleEvents } from "./ReactNativeKookit.types";
+
+declare class ReactNativeKookitModule extends NativeModule<ReactNativeKookitModuleEvents> {
+  PI: number;
+  hello(): string;
+  setValueAsync(value: string): Promise<void>;
+  enableVolumeKeyInterception(): void;
+  disableVolumeKeyInterception(): void;
+}
+
+// This call loads the native module object from the JSI.
+export default requireNativeModule<ReactNativeKookitModule>(
+  "ReactNativeKookit"
+);

package/src/ReactNativeKookitModule.web.ts

@@ -0,0 +1,48 @@
+import { registerWebModule, NativeModule } from "expo";
+
+import { ReactNativeKookitModuleEvents } from "./ReactNativeKookit.types";
+
+class ReactNativeKookitModule extends NativeModule<ReactNativeKookitModuleEvents> {
+  PI = Math.PI;
+  async setValueAsync(value: string): Promise<void> {
+    this.emit("onChange", { value });
+  }
+  hello() {
+    return "Hello world! 👋";
+  }
+  enableVolumeKeyInterception() {
+    // Web implementation - listen for keyboard events
+    if (typeof window !== "undefined") {
+      this.handleKeyDown = this.handleKeyDown.bind(this);
+      window.addEventListener("keydown", this.handleKeyDown);
+    }
+  }
+  disableVolumeKeyInterception() {
+    // Web implementation - remove keyboard event listeners
+    if (typeof window !== "undefined" && this.handleKeyDown) {
+      window.removeEventListener("keydown", this.handleKeyDown);
+    }
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    // On web, we can simulate volume key detection using specific keys
+    // This is a fallback since web doesn't have direct access to volume keys
+    let keyType: "up" | "down" | null = null;
+
+    if (event.code === "ArrowUp" && event.altKey) {
+      keyType = "up";
+    } else if (event.code === "ArrowDown" && event.altKey) {
+      keyType = "down";
+    }
+
+    if (keyType) {
+      event.preventDefault();
+      this.emit("onVolumeButtonPressed", { key: keyType });
+    }
+  }
+}
+
+export default registerWebModule(
+  ReactNativeKookitModule,
+  "ReactNativeKookitModule"
+);

package/src/ReactNativeKookitView.tsx

@@ -0,0 +1,11 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+
+import { ReactNativeKookitViewProps } from './ReactNativeKookit.types';
+
+const NativeView: React.ComponentType<ReactNativeKookitViewProps> =
+  requireNativeView('ReactNativeKookit');
+
+export default function ReactNativeKookitView(props: ReactNativeKookitViewProps) {
+  return <NativeView {...props} />;
+}

package/src/ReactNativeKookitView.web.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { ReactNativeKookitViewProps } from './ReactNativeKookit.types';
+
+export default function ReactNativeKookitView(props: ReactNativeKookitViewProps) {
+  return (
+    <div>
+      <iframe
+        style={{ flex: 1 }}
+        src={props.url}
+        onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}
+      />
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+// Reexport the native module. On web, it will be resolved to ReactNativeKookitModule.web.ts
+// and on native platforms to ReactNativeKookitModule.ts
+export { default } from './ReactNativeKookitModule';
+export { default as ReactNativeKookitView } from './ReactNativeKookitView';
+export * from  './ReactNativeKookit.types';

package/test-volume-keys.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+echo "🔧 Building React Native Kookit Module..."
+
+# Build the module
+npm run build
+
+if [ $? -eq 0 ]; then
+    echo "✅ Module built successfully!"
+    echo ""
+    echo "📱 To test volume key interception:"
+    echo "1. Make sure your MainActivity implements VolumeKeyInterceptActivity (see VOLUME_KEYS.md)"
+    echo "2. Run the example app: cd example && npm run android"
+    echo "3. Enable volume interception in the app"
+    echo "4. Press physical volume keys to test"
+    echo ""
+    echo "📋 Expected behavior:"
+    echo "- Volume HUD should NOT appear"
+    echo "- System volume should NOT change"
+    echo "- App should show alert with 'up' or 'down' key events"
+    echo ""
+    echo "📖 See VOLUME_KEYS.md for detailed implementation guide"
+else
+    echo "❌ Build failed. Please check errors above."
+fi

package/tsconfig.json

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