---
id: frame-processors-plugins-final
title: Creating Frame Processor Plugins
sidebar_label: Finish creating your Frame Processor Plugin
---

## Expose your Frame Processor Plugin to JS

To make the Frame Processor Plugin available to the Frame Processor Worklet Runtime, create the following wrapper function in JS/TS:

```ts
import type { Frame } from 'react-native-vision-camera'

/**
 * Scans QR codes.
 */
export function scanQRCodes(frame: Frame): string[] {
  'worklet'
  return __scanQRCodes(frame)
}
```

Users will then have to add the Frame Processor Plugin's name to their  `babel.config.js`.

For the QR Code Scanner, this will be `__scanQRCodes`:

```js {6}
module.exports = {
  plugins: [
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanQRCodes'],
      },
    ],
```

:::note
You have to restart metro-bundler for changes in the `babel.config.js` file to take effect.
:::

## Test it!

Simply call the wrapper Worklet in your Frame Processor:

```tsx {4}
function App() {
  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    const qrCodes = scanQRCodes(frame)
    console.log(`QR Codes in Frame: ${qrCodes}`)
  }, [])

  return (
    <Camera frameProcessor={frameProcessor} {...cameraProps} />
  )
}
```

## Next Steps

If you want to distribute your Frame Processor Plugin, simply use npm.

1. Create a blank Native Module using [bob](https://github.com/callstack/react-native-builder-bob) or [create-react-native-module](https://github.com/brodybits/create-react-native-module)
2. Name it `vision-camera-plugin-xxxxx` where `xxxxx` is the name of your plugin
3. Remove the generated template code from the Example Native Module
4. Add VisionCamera to `peerDependencies`: `"react-native-vision-camera": ">= 2"`
5. Implement the Frame Processor Plugin in the iOS, Android and JS/TS Codebase using the guides above
6. Add installation instructions to the `README.md` to let users know they have to add your frame processor in the `babel.config.js` configuration.
7. Publish the plugin to npm. Users will only have to install the plugin using `npm i vision-camera-plugin-xxxxx` and add it to their `babel.config.js` file.
8. [Add the plugin to the **official VisionCamera plugin list**](https://github.com/mrousavy/react-native-vision-camera/edit/main/docs/docs/guides/FRAME_PROCESSOR_PLUGIN_LIST.mdx) for more visibility

<br />

#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugin-list)