Screenshots

Pionne can capture an app screenshot at the exact moment of a crash. The capture is attached to the event as base64 JPG and visible in the dashboard’s “Capture” tab.

Prerequisites

Install the optional dep:

npx expo install react-native-view-shot

Enable the capture

Enable the option in init:

Pionne.init({
  token: '...',
  captureScreenshot: true,
  screenshotQuality: 0.5, // optional, default 0.5
});

Put a ref on the root <View> and pass it to the SDK:

import { useRef, useEffect } from 'react';
import { View } from 'react-native';
import { Pionne } from '@pionne/react-native';

export default function App() {
  const rootRef = useRef(null);
  useEffect(() => {
    Pionne.setRootRef(rootRef);
  }, []);

  return (
    <View ref={rootRef} style={{ flex: 1 }}>
      <MainNavigator />
    </View>
  );
}

With Expo Router, place the code in app/_layout.tsx and wrap <Stack> in the rooted <View>.

Quality and size

`screenshotQuality`	Typical size	Use case
`0.3`	~40 KB	Low-bandwidth apps
`0.5` (default)	~80 KB	Recommended trade-off
`0.8`	~200 KB	If you need to read the text

The capture is JPG-encoded and attached as base64 in the payload (screenshot field).

Disable for some views

You can use pointerEvents or a wrapper to exclude sensitive screens. A simple approach: toggle at runtime before entering a critical view.

useEffect(() => {
  Pionne.setRootRef(null); // no capture on this screen
  return () => Pionne.setRootRef(rootRef);
}, []);

Display in the dashboard

In the Pionne app, open an event → Capture tab. The screenshot is shown full-screen with a zoom button.