react-native-network-lens 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Stains M Johnson
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,208 @@
-# Temporary Holding Version
+# react-native-network-lens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm version](https://img.shields.io/npm/v/react-native-network-lens.svg)](https://www.npmjs.com/package/react-native-network-lens)
+[![CI](https://github.com/stainsmjohnson/react-native-network-lens/actions/workflows/ci.yml/badge.svg)](https://github.com/stainsmjohnson/react-native-network-lens/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/react-native-network-lens.svg)](./LICENSE)
+
+In-app HTTP inspector for React Native, built for small screens.
+
+| Request list | JSON tree | Search | Raw view |
+| --- | --- | --- | --- |
+| ![Request list](docs/list.png) | ![JSON tree](docs/tree.png) | ![Search](docs/search.png) | ![Raw view](docs/raw.png) |
+
+A modern take on `react-native-network-logger`: the same zero-dependency XHR
+capture (so `fetch`, `axios`, Apollo, etc. are all covered), with a UI that is
+actually usable on a phone:
+
+- **Tabbed request details** – *Overview* (URL, timings, query params, request
+  and response headers), *Request* payload and *Response* payload each get the
+  full screen instead of a 300 px box.
+- **Collapsible JSON tree** – payloads render like the JavaScript console:
+  expand only the object you care about, collapse the noise, long-press a node
+  to copy or share it.
+- **No line wrapping** – both the tree and the pretty-printed *Raw* view scroll
+  horizontally, so indentation and structure stay readable.
+- **Search inside payloads** – with match count and next/previous navigation
+  that auto-expands and scrolls to the hit. Works in both Tree and Raw views.
+- **Better list** – colour-coded method and status, path/host split, duration,
+  size, GraphQL operation names, pending spinners, failed/timed-out/aborted
+  states, filters by method / status group / host, and a free-text filter.
+- **Feature flag built in** – `startNetworkLogging({ enabled })` and the
+  `enabled` prop on every component turn the whole thing into a no-op, so it
+  can be driven by `__DEV__`, a remote config value or a hidden dev setting.
+- **Floating overlay** – `<NetworkLensOverlay />` adds a badge button that opens
+  the inspector in a modal. One line, done.
+- **Light / dark / auto themes**, cURL export, HAR export, share full request.
+- **Zero dependencies**, pure TypeScript, no native code. Works with the New
+  Architecture and React Native **0.83+**.
+
+## Installation
+
+```sh
+yarn add react-native-network-lens
+# or
+npm install react-native-network-lens
+```
+
+No pod install, no Gradle changes.
+
+## Quick start
+
+```tsx
+// index.js – as early as possible so nothing is missed
+import { startNetworkLogging } from 'react-native-network-lens';
+
+startNetworkLogging({ enabled: __DEV__ });
+```
+
+```tsx
+// App.tsx – the one-liner overlay
+import { NetworkLensOverlay } from 'react-native-network-lens';
+
+export default function App() {
+  return (
+    <>
+      <RootNavigator />
+      <NetworkLensOverlay enabled={__DEV__} />
+    </>
+  );
+}
+```
+
+Tap the floating **NET** button to open the inspector. It shows the number of
+captured requests and turns red when something failed.
+
+### Rendering it as a screen instead
+
+```tsx
+import { NetworkLens } from 'react-native-network-lens';
+
+const NetworkScreen = () => <NetworkLens theme="dark" />;
+```
+
+`NetworkLens` fills its parent (`flex: 1`). Put it inside your own screen /
+navigator; it handles the Android hardware back button for the details view.
+
+### Conditionally enabling (feature flag)
+
+Everything respects a single flag:
+
+```tsx
+const inspectorEnabled = __DEV__ || remoteConfig.getBoolean('network_inspector');
+
+startNetworkLogging({ enabled: inspectorEnabled });
+
+<NetworkLensOverlay enabled={inspectorEnabled} />
+```
+
+When `enabled` is `false`, `XMLHttpRequest` is left untouched and the
+components render `null`. You can also call `stopNetworkLogging()` at runtime
+to turn it off and free the captured data.
+
+## API
+
+### `startNetworkLogging(options?)`
+
+| Option            | Type       | Default | Description |
+| ----------------- | ---------- | ------- | ----------- |
+| `enabled`         | `boolean`  | `true`  | Master switch. `false` makes the call a no-op (and stops a running logger). |
+| `maxRequests`     | `number`   | `500`   | Ring-buffer size. |
+| `ignoredHosts`    | `string[]` |         | Hosts to skip, e.g. `['localhost:8081']`. |
+| `ignoredUrls`     | `string[]` |         | Exact URLs to skip. |
+| `ignoredPatterns` | `RegExp[]` |         | Tested against `"${method} ${url}"`. |
+| `refreshRate`     | `number`   | `50`    | UI update throttle in ms. |
+
+Other functions: `stopNetworkLogging()`, `isNetworkLoggingEnabled()`,
+`getRequests()`, `clearRequests()`, `setNetworkLoggingPaused(bool)`,
+`getBackHandler(fn)` and `createHar(requests)`.
+
+### `<NetworkLens />`
+
+| Prop                 | Type                                   | Default      |
+| -------------------- | -------------------------------------- | ------------ |
+| `enabled`            | `boolean`                              | `true`       |
+| `theme`              | `'light' \| 'dark' \| 'auto' \| Partial<Theme>` | `'auto'` |
+| `sort`               | `'asc' \| 'desc'`                      | `'desc'`     |
+| `compact`            | `boolean`                              | `false`      |
+| `maxRows`            | `number`                               |              |
+| `copyToClipboard`    | `(text: string) => void`               |              |
+| `header`             | `ReactNode` rendered above the search bar |           |
+
+A `ref` gives you `goBack(): boolean`, which returns from the details view to
+the list. Use it to wire your own back button or modal `onRequestClose`.
+
+The library ships no native code, so there is no clipboard access by default.
+Pass your clipboard function to get **Copy** buttons everywhere:
+
+```tsx
+import Clipboard from '@react-native-clipboard/clipboard';
+
+<NetworkLensOverlay copyToClipboard={Clipboard.setString} />
+```
+
+### `<NetworkLensOverlay />`
+
+All `NetworkLens` props plus:
+
+| Prop              | Type                                                        | Default          |
+| ----------------- | ----------------------------------------------------------- | ---------------- |
+| `position`        | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` |
+| `offset`          | `{ x?: number; y?: number }`                                | `{ x: 16, y: 32 }` |
+| `visible` / `onVisibleChange` | controlled visibility of the modal              |                  |
+| `hideButton`      | `boolean` – open it from your own dev menu instead          | `false`          |
+| `title`           | `string`                                                    | `'Network'`      |
+
+### Hooks and building blocks
+
+- `useNetworkRequests()` – live array of `NetworkRequest` objects.
+- `useLoggerEnabled()`, `useLoggerPaused()`.
+- `JsonTreeView` is exported so you can reuse the collapsible JSON viewer
+  elsewhere in your debug tooling.
+
+### Theming
+
+```tsx
+<NetworkLens theme={{ colors: { primary: '#ff5c8a', jsonKey: '#ffd166' } }} />
+```
+
+Any colour you omit falls back to the light or dark theme depending on the
+system appearance. See `Theme` in `src/theme.ts` for every token.
+
+## How it works
+
+The library patches `XMLHttpRequest.prototype` (`open`, `setRequestHeader`,
+`send`) when `startNetworkLogging()` runs and restores the originals on
+`stopNetworkLogging()`. Every callback is wrapped so a bug in the inspector can
+never break a request. Captured requests live in a single store on
+`globalThis`, which survives Fast Refresh, and React reads it through
+`useSyncExternalStore`. There is no native code, so nothing to link.
+
+## Security
+
+The inspector keeps captured headers and bodies in memory, including
+authorization tokens and cookies, and lets the user share or export them.
+Ship it behind `__DEV__` or an internal flag only, and use `ignoredHosts` /
+`ignoredPatterns` for endpoints that must never be captured. See
+[SECURITY.md](SECURITY.md) for details and how to report issues.
+
+## Migrating from `react-native-network-logger`
+
+The public API is a superset: `startNetworkLogging`, `stopNetworkLogging`,
+`getRequests`, `clearRequests`, `getBackHandler` and the default-exported
+component keep working. Differences:
+
+- `theme` accepts `'auto'` and defaults to it.
+- Requests expose `state` (`pending | done | failed`) and `failureReason`
+  (`error | timeout | abort`) instead of staying "pending" forever.
+- Bodies are parsed into `{ kind: 'json' | 'form' | 'text' | 'binary' | 'empty' }`
+  via `request.getRequestBody()` / `await request.getResponseBody()`.
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md). The example app in `example/`
+fires a variety of requests (large JSON, nested objects, forms, GraphQL-like,
+errors, timeouts, binary) so you can try every screen.
+
+## License
+
+MIT

package/lib/module/backHandler.js

@@ -0,0 +1,31 @@
+"use strict";
+
+let appBackHandler;
+let lensBackHandler;
+
+/** @internal */
+export const setLensBackHandler = handler => {
+  lensBackHandler = handler;
+};
+
+/** @internal */
+export const hasAppBackHandler = () => !!appBackHandler;
+const goBack = () => {
+  if (lensBackHandler?.()) return;
+  appBackHandler?.();
+};
+
+/**
+ * Wrap your screen's back action so the back button first navigates inside the
+ * inspector (details -> list) and only then falls back to your own navigation.
+ *
+ * ```tsx
+ * const onBack = getBackHandler(navigation.goBack);
+ * <Button title="Back" onPress={onBack} />
+ * ```
+ */
+export const getBackHandler = backHandler => {
+  appBackHandler = backHandler;
+  return goBack;
+};
+//# sourceMappingURL=backHandler.js.map

package/lib/module/backHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["appBackHandler","lensBackHandler","setLensBackHandler","handler","hasAppBackHandler","goBack","getBackHandler","backHandler"],"sourceRoot":"../../src","sources":["backHandler.ts"],"mappings":";;AAAA,IAAIA,cAA2C;AAC/C,IAAIC,eAA4C;;AAEhD;AACA,OAAO,MAAMC,kBAAkB,GAAIC,OAAuB,IAAK;EAC7DF,eAAe,GAAGE,OAAO;AAC3B,CAAC;;AAED;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM,CAAC,CAACJ,cAAc;AAEvD,MAAMK,MAAM,GAAGA,CAAA,KAAM;EACnB,IAAIJ,eAAe,GAAG,CAAC,EAAE;EACzBD,cAAc,GAAG,CAAC;AACpB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,cAAc,GAAIC,WAA0B,IAAK;EAC5DP,cAAc,GAAGO,WAAW;EAC5B,OAAOF,MAAM;AACf,CAAC","ignoreList":[]}

package/lib/module/components/BodyViewer.js

@@ -0,0 +1,207 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Share, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../theme.js";
+import { bodySize, stringifyJson } from "../utils/body.js";
+import { formatBytes } from "../utils/format.js";
+import JsonTreeView from "./JsonTree/JsonTreeView.js";
+import RawTextView from "./RawTextView.js";
+import { ActionSheet, EmptyState, SearchInput, SegmentedControl, TextButton } from "./ui/index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const KIND_LABEL = {
+  json: 'JSON',
+  form: 'Form data',
+  text: 'Text',
+  binary: 'Binary',
+  empty: 'Empty'
+};
+const share = text => Share.share({
+  message: text
+}).catch(() => undefined);
+const valueText = value => typeof value === 'string' ? value : stringifyJson(value);
+
+/**
+ * Payload viewer used by the Request and Response tabs. Structured bodies can
+ * be shown as a collapsible tree or as pretty-printed raw text; both keep lines
+ * unwrapped, scroll horizontally and support search with next/previous.
+ */
+const BodyViewer = ({
+  body,
+  loading,
+  emptyTitle,
+  emptySubtitle,
+  copyToClipboard
+}) => {
+  const theme = useTheme();
+  const structured = body?.kind === 'json' || body?.kind === 'form';
+  const [mode, setMode] = useState('tree');
+  const [query, setQuery] = useState('');
+  const [matchCount, setMatchCount] = useState(0);
+  const [matchIndex, setMatchIndex] = useState(0);
+  const [nodeMenu, setNodeMenu] = useState(null);
+  const treeRef = useRef(null);
+  const effectiveMode = structured ? mode : 'raw';
+  useEffect(() => setMatchIndex(0), [query, effectiveMode, body]);
+  const onMatchCountChange = useCallback(count => {
+    setMatchCount(count);
+    setMatchIndex(index => count === 0 ? 0 : Math.min(index, count - 1));
+  }, []);
+  const matches = {
+    count: matchCount,
+    index: matchIndex,
+    onNext: () => matchCount && setMatchIndex(i => (i + 1) % matchCount),
+    onPrev: () => matchCount && setMatchIndex(i => (i - 1 + matchCount) % matchCount)
+  };
+  const meta = useMemo(() => {
+    if (!body || body.kind === 'empty') return '';
+    const parts = [KIND_LABEL[body.kind]];
+    if (body.kind === 'binary' && body.mimeType) parts.push(body.mimeType);
+    const size = bodySize(body);
+    if (size) parts.push(formatBytes(size));
+    if (body.kind !== 'binary') parts.push(`${body.text.split('\n').length} lines`);
+    return parts.join(' · ');
+  }, [body]);
+  if (loading) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.center,
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: theme.colors.primary
+      })
+    });
+  }
+  if (!body || body.kind === 'empty') {
+    return /*#__PURE__*/_jsx(EmptyState, {
+      title: emptyTitle,
+      subtitle: emptySubtitle
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.toolbar,
+      children: [structured ? /*#__PURE__*/_jsx(SegmentedControl, {
+        value: effectiveMode,
+        onChange: setMode,
+        options: [{
+          value: 'tree',
+          label: 'Tree'
+        }, {
+          value: 'raw',
+          label: 'Raw'
+        }],
+        style: styles.modeSwitch
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: [styles.meta, {
+          color: theme.colors.textMuted
+        }],
+        numberOfLines: 1,
+        children: meta
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.spacer
+      }), effectiveMode === 'tree' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(TextButton, {
+          label: "Expand",
+          onPress: () => treeRef.current?.expandAll()
+        }), /*#__PURE__*/_jsx(TextButton, {
+          label: "Collapse",
+          onPress: () => treeRef.current?.collapseAll()
+        })]
+      }), copyToClipboard && body.kind !== 'binary' && /*#__PURE__*/_jsx(TextButton, {
+        label: "Copy",
+        onPress: () => copyToClipboard(body.text)
+      }), /*#__PURE__*/_jsx(TextButton, {
+        label: "Share",
+        onPress: () => share(body.text)
+      })]
+    }), body.kind !== 'binary' && /*#__PURE__*/_jsx(SearchInput, {
+      value: query,
+      onChangeText: setQuery,
+      placeholder: effectiveMode === 'tree' ? 'Search keys and values' : 'Search text',
+      matches: matches,
+      style: styles.search
+    }), structured && /*#__PURE__*/_jsx(Text, {
+      style: [styles.meta, styles.metaBelow, {
+        color: theme.colors.textMuted
+      }],
+      numberOfLines: 1,
+      children: meta
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.viewer, {
+        borderColor: theme.colors.border
+      }],
+      children: body.kind === 'binary' ? /*#__PURE__*/_jsx(EmptyState, {
+        title: "Binary content",
+        subtitle: body.text
+      }) : effectiveMode === 'tree' && structured ? /*#__PURE__*/_jsx(JsonTreeView, {
+        ref: treeRef,
+        value: body.value,
+        query: query,
+        activeMatch: matchIndex,
+        onMatchCountChange: onMatchCountChange,
+        onLongPressNode: setNodeMenu
+      }) : /*#__PURE__*/_jsx(RawTextView, {
+        text: body.text,
+        query: query,
+        activeMatch: matchIndex,
+        onMatchCountChange: onMatchCountChange
+      })
+    }), /*#__PURE__*/_jsx(ActionSheet, {
+      visible: nodeMenu !== null,
+      onClose: () => setNodeMenu(null),
+      title: nodeMenu?.path,
+      actions: nodeMenu ? [...(copyToClipboard ? [{
+        label: 'Copy value',
+        onPress: () => copyToClipboard(valueText(nodeMenu.value))
+      }] : []), {
+        label: 'Share value',
+        onPress: () => share(valueText(nodeMenu.value))
+      }, ...(copyToClipboard ? [{
+        label: 'Copy path',
+        onPress: () => copyToClipboard(nodeMenu.path)
+      }] : [])] : []
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  toolbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    gap: 6
+  },
+  modeSwitch: {
+    width: 130
+  },
+  spacer: {
+    flex: 1
+  },
+  search: {
+    marginHorizontal: 12,
+    marginTop: 8
+  },
+  meta: {
+    fontSize: 12,
+    flexShrink: 1
+  },
+  metaBelow: {
+    paddingHorizontal: 14,
+    paddingTop: 6
+  },
+  viewer: {
+    flex: 1,
+    marginTop: 8,
+    borderTopWidth: StyleSheet.hairlineWidth
+  }
+});
+export default BodyViewer;
+//# sourceMappingURL=BodyViewer.js.map

package/lib/module/components/BodyViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","ActivityIndicator","Share","StyleSheet","Text","View","useTheme","bodySize","stringifyJson","formatBytes","JsonTreeView","RawTextView","ActionSheet","EmptyState","SearchInput","SegmentedControl","TextButton","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","KIND_LABEL","json","form","text","binary","empty","share","message","catch","undefined","valueText","value","BodyViewer","body","loading","emptyTitle","emptySubtitle","copyToClipboard","theme","structured","kind","mode","setMode","query","setQuery","matchCount","setMatchCount","matchIndex","setMatchIndex","nodeMenu","setNodeMenu","treeRef","effectiveMode","onMatchCountChange","count","index","Math","min","matches","onNext","i","onPrev","meta","parts","mimeType","push","size","split","length","join","style","styles","center","children","color","colors","primary","title","subtitle","container","toolbar","onChange","options","label","modeSwitch","textMuted","numberOfLines","spacer","onPress","current","expandAll","collapseAll","onChangeText","placeholder","search","metaBelow","viewer","borderColor","border","ref","activeMatch","onLongPressNode","visible","onClose","path","actions","create","flex","alignItems","justifyContent","flexDirection","paddingHorizontal","paddingTop","gap","width","marginHorizontal","marginTop","fontSize","flexShrink","borderTopWidth","hairlineWidth"],"sourceRoot":"../../../src","sources":["components/BodyViewer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CodeList.js

@@ -0,0 +1,104 @@
+"use strict";
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
+import { useTheme } from "../theme.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A vertical FlatList inside a horizontal ScrollView. Rows are fixed height and
+ * never wrap, so long JSON lines stay on one line and can be panned sideways,
+ * just like a code editor. We measure the container once and size the inner
+ * list explicitly, which keeps both scroll axes stable while rows virtualise.
+ */
+export function CodeList({
+  data,
+  renderItem,
+  keyExtractor,
+  contentWidth,
+  rowHeight,
+  activeIndex,
+  extraData
+}) {
+  const theme = useTheme();
+  const listRef = useRef(null);
+  const [layout, setLayout] = useState({
+    width: 0,
+    height: 0
+  });
+  const getItemLayout = useCallback((_, index) => ({
+    length: rowHeight,
+    offset: rowHeight * index,
+    index
+  }), [rowHeight]);
+  useEffect(() => {
+    if (activeIndex === undefined || activeIndex < 0 || activeIndex >= data.length) return;
+    // Defer so a freshly expanded tree has rendered before we scroll.
+    const handle = setTimeout(() => {
+      listRef.current?.scrollToIndex({
+        index: activeIndex,
+        viewPosition: 0.3,
+        animated: true
+      });
+    }, 16);
+    return () => clearTimeout(handle);
+  }, [activeIndex, data.length]);
+  const width = Math.max(contentWidth, layout.width);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, {
+      backgroundColor: theme.colors.surface
+    }],
+    onLayout: event => {
+      const {
+        width: w,
+        height: h
+      } = event.nativeEvent.layout;
+      setLayout(prev => prev.width === w && prev.height === h ? prev : {
+        width: w,
+        height: h
+      });
+    },
+    children: layout.height > 0 && /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      bounces: false,
+      showsHorizontalScrollIndicator: true,
+      nestedScrollEnabled: true,
+      keyboardShouldPersistTaps: "handled",
+      children: /*#__PURE__*/_jsx(FlatList, {
+        ref: listRef,
+        data: data,
+        extraData: extraData,
+        renderItem: renderItem,
+        keyExtractor: keyExtractor,
+        getItemLayout: getItemLayout,
+        nestedScrollEnabled: true,
+        keyboardShouldPersistTaps: "handled",
+        initialNumToRender: 30,
+        maxToRenderPerBatch: 40,
+        windowSize: 9,
+        removeClippedSubviews: false,
+        onScrollToIndexFailed: ({
+          index
+        }) => {
+          listRef.current?.scrollToOffset({
+            offset: index * rowHeight,
+            animated: false
+          });
+        },
+        style: {
+          width,
+          height: layout.height
+        },
+        contentContainerStyle: styles.content
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    paddingVertical: 6
+  }
+});
+//# sourceMappingURL=CodeList.js.map

package/lib/module/components/CodeList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","useState","FlatList","ScrollView","StyleSheet","View","useTheme","jsx","_jsx","CodeList","data","renderItem","keyExtractor","contentWidth","rowHeight","activeIndex","extraData","theme","listRef","layout","setLayout","width","height","getItemLayout","_","index","length","offset","undefined","handle","setTimeout","current","scrollToIndex","viewPosition","animated","clearTimeout","Math","max","style","styles","container","backgroundColor","colors","surface","onLayout","event","w","h","nativeEvent","prev","children","horizontal","bounces","showsHorizontalScrollIndicator","nestedScrollEnabled","keyboardShouldPersistTaps","ref","initialNumToRender","maxToRenderPerBatch","windowSize","removeClippedSubviews","onScrollToIndexFailed","scrollToOffset","contentContainerStyle","content","create","flex","paddingVertical"],"sourceRoot":"../../../src","sources":["components/CodeList.tsx"],"mappings":"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","ignoreList":[]}