Skiacamera View

import { Tab, Tabs } from 'fumadocs-ui/components/tabs'

The <SkiaCamera /> is a view component that allows rendering Frames with @Shopify/react-native-skia. This allows fully custom GPU-based processing like effects, shaders, shapes and boxes, and more.

[!DEPENDENCY] The <SkiaCamera /> requires react-native-vision-camera-worklets (and react-native-worklets) and react-native-vision-camera-skia to be installed.

Using the <SkiaCamera />

To display a Skia Camera, mount the view and implement the onFrame(...) function to simply render the Frame:

function App() {
  return (
    <SkiaCamera
      style={StyleSheet.absoluteFill}
      device="back"
      isActive={true}
      onFrame={(frame, render) => {
        'worklet'
        // ... custom Frame processing logic
        render(({ frameTexture, canvas }) => {
          // ... custom drawing operations
          canvas.drawImage(frameTexture, 0, 0)
        })
        frame.dispose()
      }}
    />
  )
}

Since you are in full control over rendering, you can run frame-by-frame analysis and conditionally render contents or overlays such as accurate bounding boxes over QR codes or faces, or custom shaders for visual effects.

[!TIP] See "Skia Frame Processors" for more information.