open-index/open-npm huggingface dataset:
npm package: @rn-debug-mcp/babel-plugin
Description: Babel plugin for automatic React Native component instrumentation
Latest version: 1.0.5

# @rn-debug-mcp/babel-plugin

> Babel plugin for automatic React Native component instrumentation.

Part of the [RN Debug MCP](https://github.com/mudra16bhandari/rn-debug-mcp) suite. This plugin automatically injects render tracking hooks into your functional components.

## 🚀 Comprehensive Setup

To use the full RN Debug MCP suite, you need three parts:

1.  **Babel Plugin (This package)**: `npm install @rn-debug-mcp/babel-plugin --save-dev`
2.  **Instrumentation**: `npm install @rn-debug-mcp/instrumentation` (required by the plugin)
3.  **MCP Server**: Run via `npx -y @rn-debug-mcp/server` (for Cursor/AI integration)

[View the Full Integration Guide](https://github.com/mudra16bhandari/rn-debug-mcp#quick-start)

## Setup

Add the plugin to your `babel.config.js`:

```javascript
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [...(process.env.NODE_ENV !== 'production' ? ['@rn-debug-mcp/babel-plugin'] : [])],
};
```

The plugin scans your source code for functional components and injects tracking hooks from `@rn-debug-mcp/instrumentation`:

1. `useRenderTracker`: Counts render frequency.
2. `useRenderCheck`: Compares props between renders to detect unnecessary updates.
3. `useContextTracker`: Injected into `Context.Provider` to track value changes.
4. `setCurrentScreen`: Automatically inferred from filenames to provide screen-aware debugging.

## License

MIT
npm package: @rn-debug-mcp/instrumentation
Description: React Native instrumentation for RN Debug MCP
Latest version: 1.0.5

# @rn-debug-mcp/instrumentation

> React Native runtime instrumentation for RN Debug MCP.

Part of the [RN Debug MCP](https://github.com/mudra16bhandari/rn-debug-mcp) suite. This package runs inside your React Native application to collect performance data.

## 🚀 Comprehensive Setup

To use the full RN Debug MCP suite, you need three parts:

1.  **Instrumentation (This package)**: `npm install @rn-debug-mcp/instrumentation`
2.  **Babel Plugin**: `npm install @rn-debug-mcp/babel-plugin --save-dev` (for automatic tracking)
3.  **MCP Server**: Run via `npx -y @rn-debug-mcp/server` (for Cursor/AI integration)

[View the Full Integration Guide](https://github.com/mudra16bhandari/rn-debug-mcp#quick-start)

## Usage

Initialize the instrumentation in your app entry point (e.g., `index.js` or `App.tsx`):

```javascript
import { initDebugMCP } from '@rn-debug-mcp/instrumentation';

if (__DEV__) {
  initDebugMCP({
    wsUrl: 'ws://localhost:4567',
    logToConsole: false,
  });
}
```

## Features

- **Component Tracking**: Works with `@rn-debug-mcp/babel-plugin` to track component renders.
- **Context Tracking**: Monitors React Context value changes to diagnose provider-driven re-renders.
- **Network Monitoring**: Automatically intercepts and logs `fetch` calls.
- **JS Thread Monitoring**: Detects long-running tasks that block the main thread.

## License

MIT
npm package: @rn-debug-mcp/server
Description: MCP Server for React Native runtime debugging
Latest version: 1.0.5

# @rn-debug-mcp/server

> Model Context Protocol (MCP) server for React Native runtime debugging.

This is the central server for [RN Debug MCP](https://github.com/mudra16bhandari/rn-debug-mcp). It receives performance data from your React Native app and provides analysis tools to AI-powered IDEs like Cursor via the Model Context Protocol.

## 🚀 Comprehensive Setup

This server is the "brain" that analyzes data from your app. To use it, you need:

1.  **MCP Server (This package)**: Run via `npx -y @rn-debug-mcp/server` in Cursor.
2.  **Instrumentation**: `npm install @rn-debug-mcp/instrumentation` (inside your app).
3.  **Babel Plugin**: `npm install @rn-debug-mcp/babel-plugin --save-dev` (for auto-tracking).

[View the Full Integration Guide](https://github.com/mudra16bhandari/rn-debug-mcp#quick-start)

## Usage with Cursor

1. Open Cursor Settings.
2. Go to **MCP** section.
3. Click **Add New MCP Server**.
4. Set **Name** to `RN Debug`.
5. Set **Type** to `command`.
6. Set **Command** to:
   ```bash
   npx -y @rn-debug-mcp/server
   ```

## Features

Exposes several tools to your AI assistant:

- `explainScreenPerformance`: Get a high-level overview of why a screen is slow.
- `detectUnnecessaryRenders`: Find components re-rendering with identical props.
- `getSlowComponents`: List components with the highest render times.
- `detectRenderCascade`: Identify chains of expensive renders.
- `detectDuplicateNetworkCalls`: Find duplicate network calls.
- `readNativeLogs`: Fetch and filter native logs (Android logcat / iOS simctl).

## License

MIT
npm package: @rn-debugger/cli
Description: Cli react-native for @rn-debugger
Author: Marvin FRACHET, Alexandre GORY
Latest version: 0.8.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Project @rn-debugger/cli

## Why use it

This application allows to read react-native bridge.

What is this bridge?

The Bridge allows communication between the js of a react application and the peripheral language. In the case of android, the bridge makes a link between JS and Java and in the case of IOS a link between JS and Swift

The messages that navigate in this bridge are in JSON format. They have 4 attributes: type, module, method and argurments (args)

This application will then allow you to display its messages in a console and offers other possibilities such as reading the TreeView of application. This tree is reconstructed using the data intercepted in the bridge.

## How to use it ?

-   Install it with `yarn add @rn-debugger/native-connector --dev` 
 
    or  `npm install --save-dev @rn-debugger/native-connector`
    
-   Setup the RNConnector in your `index.js`

```javascript
import { AppRegistry } from 'react-native';
import RNConnector from '@rn-debugger/native-connector/dist/RNConnector';
import App from './App';


RNConnector.stream({ server: 'http://[Your Ip address]:3000' });

AppRegistry.registerComponent('RNTest', () => App);
```

- Install the @rn-debugger/cli with 

    `npm install -g @rn-debugger/cli`
    
- Run the tool in your terminal with `rn-debugger`
npm package: @rn-debugger/connector
Description: Connector react-native for rn-noname
Author: Marvin FRACHET, Alexandre GORY
Latest version: 0.8.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Project @rn-debugger/cli

## Why use it

This application allows to read react-native bridge.

What is this bridge?

The Bridge allows communication between the js of a react application and the peripheral language. In the case of android, the bridge makes a link between JS and Java and in the case of IOS a link between JS and Swift

The messages that navigate in this bridge are in JSON format. They have 4 attributes: type, module, method and argurments (args)

This application will then allow you to display its messages in a console and offers other possibilities such as reading the TreeView of application. This tree is reconstructed using the data intercepted in the bridge.

## How to use it ?

-   Install it with `yarn add @rn-debugger/native-connector --dev` 
 
    or  `npm install --save-dev @rn-debugger/native-connector`
    
-   Setup the RNConnector in your `index.js`

```javascript
import { AppRegistry } from 'react-native';
import RNConnector from '@rn-debugger/native-connector/dist/RNConnector';
import App from './App';


RNConnector.stream({ server: 'http://[Your Ip address]:3000' });

AppRegistry.registerComponent('RNTest', () => App);
```

- Install the @rn-debugger/cli with 

    `npm install -g @rn-debugger/cli`
    
- Run the tool in your terminal with `rn-debugger`
npm package: @rn-debugger/lib
Description: Lib for rn-noname
Author: Marvin FRACHET, Alexandre GORY
Latest version: 0.8.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Project @rn-debugger/lib

## Why use it

This application allows to read react-native bridge.

What is this bridge?

The Bridge allows communication between the js of a react application and the peripheral language. In the case of android, the bridge makes a link between JS and Java and in the case of IOS a link between JS and Swift

The messages that navigate in this bridge are in JSON format. They have 4 attributes: type, module, method and argurments (args)

This application will then allow you to display its messages in a console and offers other possibilities such as reading the TreeView of application. This tree is reconstructed using the data intercepted in the bridge.

## How to use it ?


-   Install it with `yarn add @rn-debugger/native-connector --dev` 
 
    or  `npm install --save-dev @rn-debugger/native-connector`
    
-   Setup the RNConnector in your `index.js`

```javascript
import { AppRegistry } from 'react-native';
import RNConnector from '@rn-debugger/native-connector/dist/RNConnector';
import App from './App';


RNConnector.stream({ server: 'http://[Your Ip address]:3000' });

AppRegistry.registerComponent('RNTest', () => App);
```

- Install the @rn-debugger/cli with 

    `npm install -g @rn-debugger/cli`
    
- Run the tool in your terminal with `rn-debugger`
npm package: @rn-debugger/native-connector
Description: Connector react-native for rn-noname
Author: Marvin FRACHET, Alexandre GORY
Latest version: 0.8.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Project @rn-debugger/native-connector

## Why use it

This application allows to read react-native bridge.

What is this bridge?

The Bridge allows communication between the js of a react application and the peripheral language. In the case of android, the bridge makes a link between JS and Java and in the case of IOS a link between JS and Swift

The messages that navigate in this bridge are in JSON format. They have 4 attributes: type, module, method and argurments (args)

This application will then allow you to display its messages in a console and offers other possibilities such as reading the TreeView of application. This tree is reconstructed using the data intercepted in the bridge.

## How to use it ?


-   Install it with `yarn add @rn-debugger/native-connector --dev` 
 
    or  `npm install --save-dev @rn-debugger/native-connector`
    
-   Setup the RNConnector in your `index.js`

```javascript
import { AppRegistry } from 'react-native';
import RNConnector from '@rn-debugger/native-connector/dist/RNConnector';
import App from './App';


RNConnector.stream({ server: 'http://[Your Ip address]:3000' });

AppRegistry.registerComponent('RNTest', () => App);
```

- Install the @rn-debugger/cli with 

    `npm install -g @rn-debugger/cli`
    
- Run the tool in your terminal with `rn-debugger`
npm package: @rn-debugger/server
Description: An application for debugging React-Native App
Author: Marvin FRACHET, Alexandre GORY
Latest version: 0.8.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Project @rn-debugger/server

## Why use it

This application allows to read react-native bridge.

What is this bridge?

The Bridge allows communication between the js of a react application and the peripheral language. In the case of android, the bridge makes a link between JS and Java and in the case of IOS a link between JS and Swift

The messages that navigate in this bridge are in JSON format. They have 4 attributes: type, module, method and argurments (args)

This application will then allow you to display its messages in a console and offers other possibilities such as reading the TreeView of application. This tree is reconstructed using the data intercepted in the bridge.

## How to use it ?

-   Install it with `yarn add @rn-debugger/native-connector --dev` 
 
    or  `npm install --save-dev @rn-debugger/native-connector`
    
-   Setup the RNConnector in your `index.js`

```javascript
import { AppRegistry } from 'react-native';
import RNConnector from '@rn-debugger/native-connector/dist/RNConnector';
import App from './App';


RNConnector.stream({ server: 'http://[Your Ip address]:3000' });

AppRegistry.registerComponent('RNTest', () => App);
```

- Install the @rn-debugger/cli with 

    `npm install -g @rn-debugger/cli`
    
- Run the tool in your terminal with `rn-debugger`
npm package: @rn-devtools/react-native-mmkv-plugin
Description: React Native MMKV plugin for rn-devtools
Author: Dorian Mazur
Latest version: 1.0.1

# @rn-devtools/react-native-mmkv-plugin

A React Native MMKV tab for rn-devtools, allowing developers to view and interact with MMKV storage data in their React Native applications.

## Installation

```bash
npm i -D @rn-devtools/react-native-mmkv-plugin
# or
yarn add -D @rn-devtools/react-native-mmkv-plugin
```
## Usage
1) Native (in your app)

Hook into your MMKV instance and pass your rn-devtools socket + deviceId.

```ts
// App.tsx
import React from "react";
import { Platform } from "react-native"
import { MMKV } from "react-native-mmkv";
import { useReactNativeDevtools } from "@rn-devtools/plugin-sdk";
import { seMMKVDevtools } from "@rn-devtools/react-native-mmkv-plugin/native";

export const storage = new MMKV({ id: "devtools-mmkv" });

export default function App() {
  useReactNativeDevtools({
    socketURL: "http://10.0.2.2:35515",
    deviceName: Platform.OS || "web",
    platform: Platform.OS || "web",
    deviceId: Platform.OS || "web",
    extraDeviceInfo: { appVersion: "1.0.0" },
    plugins: ({ socket, deviceId }) => {
      useMMKVDevtools({ socket, deviceId, storages: [storage] });
    },
  });

  return (
      {/* your App */}
  );
}
```

2) Web (devtools UI)

Add the plugin to your rn-devtools config so it appears as a tab.

// rn-devtools.config.js
```js
export default {
  plugins: ["@rn-devtools/react-native-mmkv-plugin"],
};
```
npm package: @rn-devtools/react-navigation-plugin
Description: React Navigation tab for rn-devtools
Author: Dorian Mazur
Latest version: 1.0.2

# @rn-devtools/react-navigation-plugin

A React Navigation tab for rn-devtools. It shows the focused navigator/stack, lets you trim/reset/remove routes, and invoke navigation actions from the devtools UI.

## Installation

```bash
npm i @rn-devtools/react-navigation-plugin
# or
yarn add @rn-devtools/react-navigation-plugin
```
## Usage
1) Native (in your app)

Hook into your NavigationContainer and pass your rn-devtools socket + deviceId.

```ts
// App.tsx
import React from "react";
import { Platform } from "react-native"
import { useReactNativeDevtools } from "@rn-devtools/plugin-sdk";
import { NavigationContainer, createNavigationContainerRef } from "@react-navigation/native";
import { useReactNavigationDevtools } from "@rn-devtools/react-navigation-plugin/native";

const navigationRef = createNavigationContainerRef();

export default function App() {
  useReactNativeDevtools({
    socketURL: "http://10.0.2.2:35515",
    deviceName: Platform.OS || "web",
    platform: Platform.OS || "web",
    deviceId: Platform.OS || "web",
    extraDeviceInfo: { appVersion: "1.0.0" },
    plugins: ({ socket, deviceId }) => {
      useReactNavigationDevtools({
        navigationRef: navigationRef as any,
        socket,
        deviceId,
      });
    },
  });

  return (
    <NavigationContainer ref={navigationRef}>
      {/* your navigators */}
    </NavigationContainer>
  );
}
```

2) Web (devtools UI)

Add the plugin to your rn-devtools config so it appears as a tab.

// rn-devtools.config.js
```js
export default {
  plugins: ["@rn-devtools/react-navigation-plugin"],
};
```
npm package: @rn-devtools/react-query-plugin
Description: React Query tab for rn-devtools
Author: Dorian Mazur
Latest version: 1.0.4

# @rn-devtools/react-query-plugin

A React Query tab for rn-devtools. Mirrors your app’s TanStack Query state in the devtools UI and lets you refetch/invalidate/reset/remove queries, edit data, toggle online/offline, and simulate loading/error.

## Installation

To install the plugin, ensure the version of `@tanstack/react-query-devtools` matches your `@tanstack/react-query` version.

```bash
npm install @rn-devtools/react-query-plugin 
npm install --save-dev @tanstack/react-query-devtools
# or
yarn add @rn-devtools/react-query-plugin 
yarn add -D @tanstack/react-query-devtools
```

## Usage
1) Native (in your app)

Hook the plugin into your QueryClient and rn-devtools connection.

```ts
// App.tsx
import React from "react";
import { Platform } from "react-native"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useReactQueryDevtools } from "@rn-devtools/react-query-plugin/native";
import { useReactNativeDevtools } from "@rn-devtools/plugin-sdk";

const client = new QueryClient();

export default function App() {
  useReactNativeDevtools({
    socketURL: "http://10.0.2.2:35515",
    deviceName: Platform.OS || "web",
    platform: Platform.OS || "web",
    deviceId: Platform.OS || "web",
    extraDeviceInfo: { appVersion: "1.0.0" },
    plugins: ({ socket, deviceId }) => {
      useReactQueryDevtools({ queryClient: client, socket, deviceId });
    },
  });

  return (
    <QueryClientProvider client={qc}>
      {/* your app */}
    </QueryClientProvider>
  );
}
```

2) Web (devtools UI)

Add the plugin to your rn-devtools config so it appears as a tab.

// rn-devtools.config.js
```js
export default {
  plugins: ["@rn-devtools/react-query-plugin"],
};
```
npm package: @rn-elementary/menu
Description: Creates native picker in Swift UI and JetPack Compose
Author: Shivam Rawat
Latest version: 0.1.3

# menu

Creates native picker in UIKit and Kotlin.

## [npm](https://www.npmjs.com/package/@rn-elementary/menu)
## Demo

![Screen Recording Feb 5](https://github.com/rn-elementary/menu/assets/27425384/018edcd8-d7b7-4ae9-8b00-9298e6443f24)


## Motivation

Sometimes react native apps dont feel native due to the javascript components. With this library will be starting a project to have all the native components ready to use in the application.
I couldnt find this kind of menu in the npm store so fastest way was to build it ;)

## Installation

```sh
npm install @rn-elementary/menu

yarn add @rn-elementary/menu
```

## Props

| Prop           | Description                                                                                                         | Type                                   | Default       |
| -------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------- |
| **`title`**    | Title for the menu (only iOS)                                                                                       | String                                 | ""            |
| **`options`**  | Option to display in the menu                                                                                       | Array of String                        | []            |
| **`onSelect`** | function which gives the index and title of the menu option selected.                                               | Function                               | () => Void    |
| **`layout`**   | It is used to overlap the native view over the react native component. Without this the component wont be tappable. | layout from react-native-picker-native | **Important** |

## Usage

- Kindly look into the example/src/App.tsx as it has the full implementation.

```js
import { PickerNativeView, usePickerLayout} from "@rn-elementary/menu";

// ...
  const { layout, onLayout } = usePickerLayout();
// ...
 <PickerNativeView
        title={'Sample Title'}
        options={[
          'One',
          'Two',
          'Four',
          'Five',
          'Six',
          'Seven',
          'Eight',
          'Nine',
          'Ten',
        ]}
        onSelect={(e) => {
          console.log(e.nativeEvent.index);
          console.log(e.nativeEvent.title);
        }}
        layout={layout}
      >
        <View
          onLayout={onLayout}
          style={{ marginTop: 200, width: 200, marginLeft: 20 }}
        >
          <Text
            style={{
              backgroundColor: 'red',
            }}
          >
            CLICK ME
          </Text>
        </View>
```

## Contributing

PR's are highly appreciated and so are issues.

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @rn-flix/auto-image
Description: ⚡ Image with enhanced feature like auto scale image, loading, and more ⚡
Author: Flix
Latest version: 1.0.2

# Auto Image

⚡ Image with enhanced feature like auto scale image, loading, and more ⚡

## Description

AutoImage is a React Native component that automatically scales images to fit the screen while maintaining their aspect ratio. It also provides a loading indicator and error handling.

## Installation

To install Auto Image, run the following command:

```bash
npm install @rn-flix/auto-image
```

## Usage

To use Auto Image, import the component and pass the image source as a prop:

```jsx
import AutoImage from '@rn-flix/auto-image';

const App = () => {
  return <AutoImage source="https://picsum.photos/400/200" width={300} />;
};
```

## Props

The following props are available:

- `source`: The image source either require or url directly (required)
- `width`: The width of the image (optional)
- `height`: The height of the image (optional)
- `style`: Custom styles for the image (optional)
- `loadingWidth`: Set the width of the loading indicator (optional)
- `loadingHeight`: Set the height of the loading indicator (optional)

## Example

Here is an example of using Auto Image with a remote image:

```jsx
import AutoImage from '@rn-flix/auto-image';

const App = () => {
  return (
    <AutoImage
      source="https://picsum.photos/400/200"
      width={300}
      style={{ borderRadius: 10 }}
    />
  );
};
```

## License

Auto Image is licensed under the MIT License.

## Author

Auto Image was created by [Flix](https://github.com/flixyudh).

## Bugs and Issues

If you encounter any bugs or issues, please report them on the [issue tracker](https://github.com/flixyudh/rn-flix/issues).
npm package: @rn-lalala/hello-world2
Description: --- title: Hello World2 nav:   title: test   path: /component group:   title: 示例   path: /basic   order: 0 ---
Latest version: 0.0.8

---
title: Hello World2
nav:
  title: test
  path: /component
group:
  title: 示例
  path: /basic
  order: 0
---

# Hello World

> 示例

<code src="./__fixtures__/demo.tsx"></code>
npm package: @rn-lalala/sop
Description: A component for sop
Author: changhuali
Latest version: 1.1.7

# sop

> SOP 业务公共组件, 内部对 SOP 表单、预览进行了封装

## 使用

```sh
yarn add @rn-lalala/sop @rn-lalala/upload
```

_请确保项目安装了上述包中`peerDependencies`列出的所有三方包，并仔细检查版本。_

## API

### Form

> SOP 表单组件

**使用**

```tsx | pure
import React from "react"
import { SopForm, useSopForm } from "@rn-lalala/sop"

const Demo = () => {
  const form = useSopForm()
  return (
    <SopForm
      loading={false}
      uuid={"uuid"}
      form={form}
      data={[]}
      title={"title"}
    />
  )
}
```

### Preview

> SOP 预览组件

**使用**

```tsx | pure
import React from "react"
import { SopPreview } from "@rn-lalala/sop"

const Demo = () => {
  return <SopPreview loading={false} data={[]} title={"title"} />
}
```

### useSopForm

> 创建`SopForm`组件的`form`属性实例，相较`xiaoshu`的`form`, 其多了一个属
> 性`strictValidation`, 其值为`bool`类型, 用来控制表单是否需要严格校验, 在调
> 用`form.validateFields`方法时, 用户应该手动设置该属性的值
npm package: @rn-lalala/sop-pro
Description: A higher abstracted component for sop
Author: changhuali
Latest version: 1.2.8

# sop-pro

> SOP 业务公共组件, 相比`@rn-lalala/sop`组件, 内部对 SOP 模板、答案、暂存、等功
> 能进行了封装, 并内置了 loading、error 等状态下的 UI

## 使用

```sh
yarn add @rn-lalala/sop-pro @rn-lalala/sop @rn-lalala/upload
```

_请确保项目安装了上述包中`peerDependencies`列出的所有三方包，并仔细检查版本。_

## API

### Form

> SOP 表单组件

**使用**

```tsx | pure
import React from "react"
import { Form, useSopRef } from "@rn-lalala/sop-pro"

const Demo = () => {
  const sopFormRef = useSopRef()
  return (
    <Form
      ref={sopFormRef}
      title={"每个模板的title"} // 可以为render函数
      uuid={"全局唯一id"} // 推荐由路由+业务id+操作类型组成
      businessId={"业务id"}
      sopIds={"SOP ID组成的数组"}
    />
  )
}
```

### Preview

> SOP 预览组件

**使用**

```tsx | pure
import React from "react"
import { Preview } from "@rn-lalala/sop-pro"

const Demo = () => {
  return (
    <Preview
      title={"每个模板的title"}
      businessId={"业务id"}
      sopIds={"SOP ID组成的数组"}
    />
  )
}
```

### useSopRef

> 创建`Form`组件的`ref`, 组件内部通过`ref`向外暴露了部分`API`

**form**

> `SopForm`表单`form`属性实例

**requestTempSave**

> 请求暂存, 返回一个`Promise<bool>`对象, 成功结果为`true`, 失败结果为`false`

**requestSave**

> 请求保存修改后的数据, 返回一个`Promise<bool>`对象, 成功结果为`true`, 失败结果
> 为`false`

**clear**

> 清除当前表单内后台上传存储的本地资源，比如当用户已经将数据同步到后端后，应该手
> 动调用此方法

**refresh**

> 刷新 SOP 模板及答案的数据

### usePreviewRef

**refresh**

> 刷新 SOP 模板及答案的数据
npm package: @rn-lalala/upload
Description: A component for upload
Author: changhuali
Latest version: 1.0.2

# upload

> 后台上传公共组件, 相比`@fruits-chain/react-native-upload`组件, 内部增加了后台
> 上传功能, 用户在上传图片时, 不需要等待上传完成即可退出操作界面, 下次进入该页面
> 时, 本地数据(上传中和上传完成的图片)会自动同步到组件内部

## 使用

```sh
yarn add @rn-lalala/upload
```

```tsx | pure
import React, { useEffect } from "react"
import { useBackUploadManager, init } from "@rn-lalala/upload"

const App = () => {
  // 获取run方法
  const { run } = useBackUploadManager((state) => ({
    run: state.run,
  }))

  // 注意: 需要用户决定init和run方法的调用时机, 下面仅作为示例
  useEffect(() => {
    // 初始化上传API, useBackUploadManager内部会执行此回调函数上传文件
    init(async (file) => {
      return await yourUploadAPI(file)
    })
    // 继续执行未完成的任务
    run()
  }, [run])

  return <YourAppContent />
}
```

_请确保项目安装了上述包中`peerDependencies`列出的所有三方包，并仔细检查版本。_

## API

### Upload

> 上传组件, 支持`@fruits-chain/react-native-upload`上传组件的所有属性配置, 但是
> 目前仅支持作为`受控组件`使用

**使用**

```tsx | pure
import React from "react"
import Upload from "@rn-lalala/upload"

const Demo = () => {
  return <Upload groupUuid={"所属分组唯一id"} uuid={"当前上传组件的唯一id"} />
}
```

> 为什么会有`组`的概念, 主要是方便内部做资源管理, 比如按`组`清除缓存等

> uuid 的作用, 组件内部在同步缓存的数据到组件状态时, 需要通
> 过`groupUuid`和`uuid`对资源进行匹配

### init

> 初始化后台上传, 其参数为执行上传 API 的回调函数

使用

```tsx | pure
import { init } from "@rn-lalala/upload"

init(async (file) => {
  return await yourUploadAPI(file)
})
```

### useBackUploadManager

> 一个`zustand` store, 内部负责整个后台上传的调度, 也暴露了诸
> 如`run`、`setFinishedTask`、`clear`等方法供外部使用

_由于`useBackUploadManager`是一个`React hook`, 所以他只能在组件内部使用_

#### run

> 开始处理未完成的任务

使用

```tsx | pure
const { run } = useBackUploadManager((state) => ({
  run: state.run,
}))

run()
```

#### setFinishedTask

> 清理已完成的任务

使用

```tsx | pure
const { setFinishedTask } = useBackUploadManager((state) => ({
  setFinishedTask: state.setFinishedTask,
}))

// 清除某个组已完成的任务
setFinishedTask(groupUuid)
// 清除某个组下某个上传组件已完成的任务
setFinishedTask(groupUuid, uploadUuid)
```

#### clear

> 清理所有任务

使用

```tsx | pure
const { clear } = useBackUploadManager((state) => ({
  clear: state.clear,
}))

clear()
```
npm package: @rn-macos/popover
Description: React Native macOS Popover Native Module
Author: Simek
Latest version: 0.1.0

### 🚧 THIS IS JUST A PROOF-OF-CONCEPT WITH VERY BAD IMPLEMENTATION! 🚧
#### 💣 DO NOT USE BESIDES TESTING OR EXPERIMENTS 💣

Popover Native Module for `react-native-macos`.

## Installation

```sh
yarn add @rn-macos/popover
```

## Usage

```js
import { Popover, PopoverManager } from "@rn-macos/popover";
```
npm package: @rn-probe/cli
Description: CLI + daemon tool for Claude Code to introspect live React Native apps
Latest version: 0.2.11

# rn-probe

Claude Code's window into a live React Native app.

A daemon + CLI tool that gives Claude Code structured, text-based introspection into a running RN app — component trees, JS errors, native logs, screenshots, tap events, and more. The same pattern as [`@vercel/next-browser`](https://github.com/vercel-labs/next-browser) applied to React Native.

Works with bare React Native and Expo (Expo Go + dev builds).

---

## Install

```bash
npm install -g @rn-probe/cli
```

Or via the Claude Code skill system:

```bash
npx skills add rn-probe
```

---

## Quick Start

```bash
# Connect to your running dev server
rn open

# For Expo Go
rn open --expo-go

# For Expo dev build
rn open --dev-build

# See what's on screen
rn screenshot

# Inspect the component tree
rn tree

# Drill into a component
rn inspect 42

# Check for errors
rn errors

# Navigate to a screen
rn goto myapp://home

# Close when done
rn close
```

---

## Commands

See [SKILL.md](./SKILL.md) for the full command reference.

---

## Requirements

- Node 22+
- macOS with Xcode CLI tools (for iOS simulator via `xcrun simctl`)
- Android SDK + `adb` (optional, for Android)
- A React Native app running in dev mode (Metro on port 8081, RN DevTools on port 8097)

---

## License

MIT