react-native-instant-webview 0.1.0

package/lib/module/usePooledWebView.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useWebViewPool } from './WebViewPoolProvider';
+let hookBorrowerIdCounter = 0;
+export function usePooledWebView() {
+  const pool = useWebViewPool();
+  const instanceIdRef = useRef(null);
+  const webViewRefRef = useRef(null);
+  const [instanceId, setInstanceId] = useState(null);
+  useEffect(() => {
+    return () => {
+      if (instanceIdRef.current) {
+        pool.release(instanceIdRef.current);
+        instanceIdRef.current = null;
+        webViewRefRef.current = null;
+      }
+    };
+  }, [pool]);
+  const borrow = useCallback(() => {
+    if (instanceIdRef.current) {
+      return {
+        instanceId: instanceIdRef.current,
+        webViewRef: webViewRefRef.current
+      };
+    }
+    const borrowerId = `hook-borrower-${++hookBorrowerIdCounter}`;
+    const result = pool.borrow(borrowerId);
+    if (!result) return null;
+    instanceIdRef.current = result.instanceId;
+    webViewRefRef.current = result.webViewRef;
+    setInstanceId(result.instanceId);
+    return result;
+  }, [pool]);
+  const release = useCallback(() => {
+    if (instanceIdRef.current) {
+      pool.release(instanceIdRef.current);
+      instanceIdRef.current = null;
+      webViewRefRef.current = null;
+      setInstanceId(null);
+    }
+  }, [pool]);
+  return {
+    borrow,
+    release,
+    instanceId,
+    webViewRef: webViewRefRef.current
+  };
+}
+//# sourceMappingURL=usePooledWebView.js.map

package/lib/module/usePooledWebView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","useState","useWebViewPool","hookBorrowerIdCounter","usePooledWebView","pool","instanceIdRef","webViewRefRef","instanceId","setInstanceId","current","release","borrow","webViewRef","borrowerId","result"],"sourceRoot":"../../src","sources":["usePooledWebView.ts"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAGhE,SAASC,cAAc,QAAQ,uBAAuB;AAGtD,IAAIC,qBAAqB,GAAG,CAAC;AAE7B,OAAO,SAASC,gBAAgBA,CAAA,EAA2B;EACzD,MAAMC,IAAI,GAAGH,cAAc,CAAC,CAAC;EAC7B,MAAMI,aAAa,GAAGN,MAAM,CAAgB,IAAI,CAAC;EACjD,MAAMO,aAAa,GAAGP,MAAM,CAAmC,IAAI,CAAC;EACpE,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGR,QAAQ,CAAgB,IAAI,CAAC;EAEjEF,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX,IAAIO,aAAa,CAACI,OAAO,EAAE;QACzBL,IAAI,CAACM,OAAO,CAACL,aAAa,CAACI,OAAO,CAAC;QACnCJ,aAAa,CAACI,OAAO,GAAG,IAAI;QAC5BH,aAAa,CAACG,OAAO,GAAG,IAAI;MAC9B;IACF,CAAC;EACH,CAAC,EAAE,CAACL,IAAI,CAAC,CAAC;EAEV,MAAMO,MAAM,GAAGd,WAAW,CAAC,MAAM;IAC/B,IAAIQ,aAAa,CAACI,OAAO,EAAE;MACzB,OAAO;QACLF,UAAU,EAAEF,aAAa,CAACI,OAAO;QACjCG,UAAU,EAAEN,aAAa,CAACG;MAC5B,CAAC;IACH;IAEA,MAAMI,UAAU,GAAG,iBAAiB,EAAEX,qBAAqB,EAAE;IAC7D,MAAMY,MAAM,GAAGV,IAAI,CAACO,MAAM,CAACE,UAAU,CAAC;IACtC,IAAI,CAACC,MAAM,EAAE,OAAO,IAAI;IAExBT,aAAa,CAACI,OAAO,GAAGK,MAAM,CAACP,UAAU;IACzCD,aAAa,CAACG,OAAO,GAAGK,MAAM,CAACF,UAAU;IACzCJ,aAAa,CAACM,MAAM,CAACP,UAAU,CAAC;IAChC,OAAOO,MAAM;EACf,CAAC,EAAE,CAACV,IAAI,CAAC,CAAC;EAEV,MAAMM,OAAO,GAAGb,WAAW,CAAC,MAAM;IAChC,IAAIQ,aAAa,CAACI,OAAO,EAAE;MACzBL,IAAI,CAACM,OAAO,CAACL,aAAa,CAACI,OAAO,CAAC;MACnCJ,aAAa,CAACI,OAAO,GAAG,IAAI;MAC5BH,aAAa,CAACG,OAAO,GAAG,IAAI;MAC5BD,aAAa,CAAC,IAAI,CAAC;IACrB;EACF,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;EAEV,OAAO;IACLO,MAAM;IACND,OAAO;IACPH,UAAU;IACVK,UAAU,EAAEN,aAAa,CAACG;EAC5B,CAAC;AACH","ignoreList":[]}

package/lib/typescript/PooledWebView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { PooledWebViewProps } from './types';
+declare const _default: React.NamedExoticComponent<PooledWebViewProps>;
+export default _default;
+//# sourceMappingURL=PooledWebView.d.ts.map

package/lib/typescript/PooledWebView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PooledWebView.d.ts","sourceRoot":"","sources":["../../src/PooledWebView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;;AAoGlD,wBAAyC"}

package/lib/typescript/WebViewManager.d.ts

@@ -0,0 +1,21 @@
+import type { PoolConfig, PoolState, PoolListener, BorrowResult } from './types';
+declare class WebViewManager {
+    private static instance;
+    private config;
+    private instances;
+    private listeners;
+    private initialized;
+    private constructor();
+    static getInstance(): WebViewManager;
+    static resetInstance(): void;
+    initialize(config?: Partial<PoolConfig>): void;
+    borrow(borrowerId: string): BorrowResult | null;
+    release(instanceId: string): void;
+    markIdle(instanceId: string): void;
+    getState(): PoolState;
+    getConfig(): PoolConfig;
+    subscribe(listener: PoolListener): () => void;
+    private notify;
+}
+export default WebViewManager;
+//# sourceMappingURL=WebViewManager.d.ts.map

package/lib/typescript/WebViewManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebViewManager.d.ts","sourceRoot":"","sources":["../../src/WebViewManager.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,YAAY,EAEZ,YAAY,EACb,MAAM,SAAS,CAAC;AAEjB,cAAM,cAAc;IAClB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA+B;IAEtD,OAAO,CAAC,MAAM,CAAmC;IACjD,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,SAAS,CAAgC;IACjD,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO;IAEP,MAAM,CAAC,WAAW,IAAI,cAAc;IAOpC,MAAM,CAAC,aAAa,IAAI,IAAI;IAI5B,UAAU,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI;IAqB9C,MAAM,CAAC,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI;IAe/C,OAAO,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAcjC,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAUlC,QAAQ,IAAI,SAAS;IAUrB,SAAS,IAAI,UAAU;IAIvB,SAAS,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM,IAAI;IAO7C,OAAO,CAAC,MAAM;CAIf;AAED,eAAe,cAAc,CAAC"}

package/lib/typescript/WebViewPoolProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { WebViewPoolContextValue, WebViewPoolProviderProps } from './types';
+export declare function useWebViewPool(): WebViewPoolContextValue;
+export declare const WebViewPoolProvider: React.FC<WebViewPoolProviderProps>;
+export default WebViewPoolProvider;
+//# sourceMappingURL=WebViewPoolProvider.d.ts.map

package/lib/typescript/WebViewPoolProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebViewPoolProvider.d.ts","sourceRoot":"","sources":["../../src/WebViewPoolProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAMnG,OAAO,KAAK,EAKV,uBAAuB,EACvB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAIjB,wBAAgB,cAAc,IAAI,uBAAuB,CAMxD;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAwGlE,CAAC;AAQF,eAAe,mBAAmB,CAAC"}

package/lib/typescript/WebViewSlot.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { InstanceLayout, PoolConfig, WebViewInstance } from './types';
+import type { WebViewProps } from 'react-native-webview';
+interface WebViewSlotProps {
+    instance: WebViewInstance;
+    layout: InstanceLayout | null;
+    instanceProps: Partial<WebViewProps> | undefined;
+    config: PoolConfig;
+    onCleanupComplete: (instanceId: string) => void;
+}
+declare const _default: React.NamedExoticComponent<WebViewSlotProps>;
+export default _default;
+//# sourceMappingURL=WebViewSlot.d.ts.map

package/lib/typescript/WebViewSlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebViewSlot.d.ts","sourceRoot":"","sources":["../../src/WebViewSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IACjD,MAAM,EAAE,UAAU,CAAC;IACnB,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;;AA6FD,wBAAuC"}

package/lib/typescript/__mocks__/react-native-webview.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const WebView: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export { WebView };
+export type WebViewProps = Record<string, any>;
+export type WebViewNavigation = {
+    url: string;
+    title: string;
+    loading: boolean;
+    canGoBack: boolean;
+    canGoForward: boolean;
+};
+//# sourceMappingURL=react-native-webview.d.ts.map

package/lib/typescript/__mocks__/react-native-webview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-native-webview.d.ts","sourceRoot":"","sources":["../../../src/__mocks__/react-native-webview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,OAAO,kFAEX,CAAC;AAGH,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAC/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC"}

package/lib/typescript/__mocks__/react-native.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+declare const View: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+declare const StyleSheet: {
+    create: (styles: any) => any;
+};
+export { View, StyleSheet };
+export type ViewStyle = Record<string, any>;
+export type LayoutChangeEvent = {
+    nativeEvent: {
+        layout: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    };
+};
+//# sourceMappingURL=react-native.d.ts.map

package/lib/typescript/__mocks__/react-native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-native.d.ts","sourceRoot":"","sources":["../../../src/__mocks__/react-native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,IAAI,kFAER,CAAC;AAGH,QAAA,MAAM,UAAU;qBACG,GAAG;CACrB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;AAC5B,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAC5C,MAAM,MAAM,iBAAiB,GAAG;IAAE,WAAW,EAAE;QAAE,MAAM,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAA;CAAE,CAAC"}

package/lib/typescript/constants.d.ts

@@ -0,0 +1,9 @@
+import type { ViewStyle } from 'react-native';
+import type { PoolConfig } from './types';
+export declare const DEFAULT_POOL_CONFIG: PoolConfig;
+export declare const HIDDEN_STYLE: ViewStyle;
+export declare const BLANK_HTML_SOURCE: {
+    readonly html: "";
+};
+export declare const CLEANUP_SCRIPT = "\n(function() {\n  try {\n    window.scrollTo(0, 0);\n    var highestTimeoutId = setTimeout(function(){}, 0);\n    for (var i = 0; i < highestTimeoutId; i++) {\n      clearTimeout(i);\n    }\n    var highestIntervalId = setInterval(function(){}, 0);\n    for (var j = 0; j < highestIntervalId; j++) {\n      clearInterval(j);\n    }\n    if (document.body) {\n      document.body.innerHTML = '';\n    }\n  } catch(e) {}\n  true;\n})();\n";
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,mBAAmB,EAAE,UAGjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,SAO1B,CAAC;AAMF,eAAO,MAAM,iBAAiB;;CAAwB,CAAC;AAMvD,eAAO,MAAM,cAAc,0bAkB1B,CAAC"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,6 @@
+export { WebViewPoolProvider, useWebViewPool } from './WebViewPoolProvider';
+export { default as PooledWebView } from './PooledWebView';
+export { usePooledWebView } from './usePooledWebView';
+export { default as WebViewManager } from './WebViewManager';
+export type { PoolConfig, InstanceStatus, WebViewInstance, PoolState, BorrowResult, WebViewPoolContextValue, InstanceLayout, PooledWebViewProps, WebViewPoolProviderProps, UsePooledWebViewReturn, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,YAAY,EACV,UAAU,EACV,cAAc,EACd,eAAe,EACf,SAAS,EACT,YAAY,EACZ,uBAAuB,EACvB,cAAc,EACd,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,GACvB,MAAM,SAAS,CAAC"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,62 @@
+import type { RefObject } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { WebView, WebViewProps } from 'react-native-webview';
+export interface PoolConfig {
+    poolSize: number;
+    cleanupOnReturn: boolean;
+    customCleanupScript?: string;
+    defaultWebViewProps?: Partial<WebViewProps>;
+}
+export type InstanceStatus = 'idle' | 'borrowed' | 'cleaning';
+export interface WebViewInstance {
+    id: string;
+    status: InstanceStatus;
+    webViewRef: RefObject<WebView | null>;
+    borrowerId: string | null;
+    createdAt: number;
+    borrowedAt: number | null;
+}
+export interface PoolState {
+    instances: WebViewInstance[];
+    availableCount: number;
+    borrowedCount: number;
+    initialized: boolean;
+}
+export interface BorrowResult {
+    instanceId: string;
+    webViewRef: RefObject<WebView | null>;
+}
+export interface InstanceLayout {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface WebViewPoolContextValue {
+    state: PoolState;
+    borrow: (borrowerId: string) => BorrowResult | null;
+    release: (instanceId: string) => void;
+    setInstanceLayout: (instanceId: string, layout: InstanceLayout | null) => void;
+    setInstanceProps: (instanceId: string, props: Partial<WebViewProps>) => void;
+    getInstanceLayout: (instanceId: string) => InstanceLayout | null;
+    getInstanceProps: (instanceId: string) => Partial<WebViewProps> | undefined;
+}
+export interface PooledWebViewProps extends Omit<WebViewProps, 'ref'> {
+    poolKey?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    onPoolExhausted?: () => void;
+    onBorrowed?: (instanceId: string) => void;
+    onReturned?: (instanceId: string) => void;
+}
+export interface WebViewPoolProviderProps {
+    config?: Partial<PoolConfig>;
+    children: React.ReactNode;
+}
+export interface UsePooledWebViewReturn {
+    borrow: () => BorrowResult | null;
+    release: () => void;
+    instanceId: string | null;
+    webViewRef: RefObject<WebView | null> | null;
+}
+export type PoolListener = (state: PoolState) => void;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/usePooledWebView.d.ts

@@ -0,0 +1,3 @@
+import type { UsePooledWebViewReturn } from './types';
+export declare function usePooledWebView(): UsePooledWebViewReturn;
+//# sourceMappingURL=usePooledWebView.d.ts.map

package/lib/typescript/usePooledWebView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePooledWebView.d.ts","sourceRoot":"","sources":["../../src/usePooledWebView.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAItD,wBAAgB,gBAAgB,IAAI,sBAAsB,CAiDzD"}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "react-native-instant-webview",
+  "version": "0.1.0",
+  "description": "Zero-loading WebView pooling for React Native",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "bob build",
+    "test": "jest --forceExit",
+    "prepare": "bob build"
+  },
+  "keywords": [
+    "react-native",
+    "webview",
+    "pool",
+    "instant",
+    "preload"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wooBottle/react-native-instant-webview"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-webview": ">=13.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-native": "^5.4.0",
+    "@testing-library/react-native": "^12.4.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "jest": "^29.7.0",
+    "react": "^18.2.0",
+    "react-native": "^0.73.0",
+    "react-native-builder-bob": "^0.23.0",
+    "react-native-webview": "^13.6.0",
+    "react-test-renderer": "^18.2.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.3.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/lib/"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "<rootDir>/src/__mocks__/react-native.ts",
+      "^react-native-webview$": "<rootDir>/src/__mocks__/react-native-webview.tsx"
+    }
+  }
+}

package/src/PooledWebView.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+import { WebView } from 'react-native-webview';
+import type { WebViewProps } from 'react-native-webview';
+import type { PooledWebViewProps } from './types';
+import { useWebViewPool } from './WebViewPoolProvider';
+
+let borrowerIdCounter = 0;
+
+const PooledWebView: React.FC<PooledWebViewProps> = ({
+  poolKey,
+  containerStyle,
+  onPoolExhausted,
+  onBorrowed,
+  onReturned,
+  source,
+  ...webViewProps
+}) => {
+  const pool = useWebViewPool();
+  const instanceIdRef = useRef<string | null>(null);
+  const placeholderRef = useRef<View>(null);
+  const borrowerIdRef = useRef(poolKey ?? `borrower-${++borrowerIdCounter}`);
+  const propsRef = useRef<Partial<WebViewProps>>({ source, ...webViewProps });
+
+  const [borrowed, setBorrowed] = useState(false);
+  const [fallback, setFallback] = useState(false);
+
+  // Keep propsRef in sync without triggering re-renders
+  propsRef.current = { source, ...webViewProps };
+
+  // Borrow on mount
+  useEffect(() => {
+    const result = pool.borrow(borrowerIdRef.current);
+    if (!result) {
+      setFallback(true);
+      onPoolExhausted?.();
+      return;
+    }
+
+    instanceIdRef.current = result.instanceId;
+    pool.setInstanceProps(result.instanceId, propsRef.current);
+    setBorrowed(true);
+    onBorrowed?.(result.instanceId);
+
+    return () => {
+      const id = instanceIdRef.current;
+      if (id) {
+        pool.setInstanceLayout(id, null);
+        pool.release(id);
+        onReturned?.(id);
+        instanceIdRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Update props when source changes (the primary prop that changes)
+  useEffect(() => {
+    const id = instanceIdRef.current;
+    if (!id || !borrowed) return;
+
+    pool.setInstanceProps(id, propsRef.current);
+    // Only re-sync when source actually changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [source]);
+
+  // Measure placeholder position
+  const handleLayout = useCallback(
+    (_event: LayoutChangeEvent) => {
+      const id = instanceIdRef.current;
+      if (!id || !placeholderRef.current) return;
+
+      placeholderRef.current.measureInWindow((x, y, width, height) => {
+        if (width > 0 && height > 0) {
+          pool.setInstanceLayout(id, {
+            top: y,
+            left: x,
+            width,
+            height,
+          });
+        }
+      });
+    },
+    [pool],
+  );
+
+  // Pool exhausted — fall back to a regular WebView
+  if (fallback) {
+    return (
+      <View style={[{ flex: 1 }, containerStyle]}>
+        <WebView source={source} {...webViewProps} style={{ flex: 1 }} />
+      </View>
+    );
+  }
+
+  return (
+    <View
+      ref={placeholderRef}
+      style={[{ flex: 1 }, containerStyle]}
+      onLayout={handleLayout}
+    />
+  );
+};
+
+export default React.memo(PooledWebView);

package/src/WebViewManager.ts

@@ -0,0 +1,120 @@
+import { createRef } from 'react';
+import type { WebView } from 'react-native-webview';
+import { DEFAULT_POOL_CONFIG } from './constants';
+import type {
+  PoolConfig,
+  PoolState,
+  PoolListener,
+  WebViewInstance,
+  BorrowResult,
+} from './types';
+
+class WebViewManager {
+  private static instance: WebViewManager | null = null;
+
+  private config: PoolConfig = DEFAULT_POOL_CONFIG;
+  private instances: WebViewInstance[] = [];
+  private listeners: Set<PoolListener> = new Set();
+  private initialized = false;
+
+  private constructor() {}
+
+  static getInstance(): WebViewManager {
+    if (!WebViewManager.instance) {
+      WebViewManager.instance = new WebViewManager();
+    }
+    return WebViewManager.instance;
+  }
+
+  static resetInstance(): void {
+    WebViewManager.instance = null;
+  }
+
+  initialize(config?: Partial<PoolConfig>): void {
+    if (this.initialized) return;
+
+    this.config = { ...DEFAULT_POOL_CONFIG, ...config };
+    this.instances = [];
+
+    for (let i = 0; i < this.config.poolSize; i++) {
+      this.instances.push({
+        id: `webview-pool-${i}`,
+        status: 'idle',
+        webViewRef: createRef<WebView | null>(),
+        borrowerId: null,
+        createdAt: Date.now(),
+        borrowedAt: null,
+      });
+    }
+
+    this.initialized = true;
+    this.notify();
+  }
+
+  borrow(borrowerId: string): BorrowResult | null {
+    const idle = this.instances.find((inst) => inst.status === 'idle');
+    if (!idle) return null;
+
+    idle.status = 'borrowed';
+    idle.borrowerId = borrowerId;
+    idle.borrowedAt = Date.now();
+    this.notify();
+
+    return {
+      instanceId: idle.id,
+      webViewRef: idle.webViewRef,
+    };
+  }
+
+  release(instanceId: string): void {
+    const inst = this.instances.find((i) => i.id === instanceId);
+    if (!inst || inst.status !== 'borrowed') return;
+
+    if (this.config.cleanupOnReturn) {
+      inst.status = 'cleaning';
+    } else {
+      inst.status = 'idle';
+      inst.borrowerId = null;
+      inst.borrowedAt = null;
+    }
+    this.notify();
+  }
+
+  markIdle(instanceId: string): void {
+    const inst = this.instances.find((i) => i.id === instanceId);
+    if (!inst) return;
+
+    inst.status = 'idle';
+    inst.borrowerId = null;
+    inst.borrowedAt = null;
+    this.notify();
+  }
+
+  getState(): PoolState {
+    return {
+      instances: [...this.instances],
+      availableCount: this.instances.filter((i) => i.status === 'idle').length,
+      borrowedCount: this.instances.filter((i) => i.status === 'borrowed')
+        .length,
+      initialized: this.initialized,
+    };
+  }
+
+  getConfig(): PoolConfig {
+    return { ...this.config };
+  }
+
+  subscribe(listener: PoolListener): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  private notify(): void {
+    const state = this.getState();
+    this.listeners.forEach((listener) => listener(state));
+  }
+}
+
+export default WebViewManager;