← All developer systems
BetaReact Native

Integrate ScreenSteer with React Native

Connect the ScreenSteer session and hooks to LiveKit React Native while keeping view and control consent inside the application.

The protocol core is production-exercised; native capture depends on LiveKit setup.

Download and install

Embed the validated ScreenSteer agent in a React Native app and connect it to the LiveKit React Native SDK.

Download React Native SDK (.tgz)

Requirements

  • ✓React Native
  • ✓@livekit/react-native
  • ✓livekit-client
  • ✓Native iOS/Android LiveKit configuration
npm i ./screensteer-react-native-0.1.0.tgz @livekit/react-native livekit-client
QUICKSTART

Start with explicit consent

Replace pk_dev_… with the Development key shown once when you create it in the console. Use the one-time pk_live_… key from the Production environment after paid activation.

SupportScreen.tsx
TypeScript
const session = new ScreenSteerSession({
  baseUrl: "https://screensteer.com",
  publishableKey: "pk_dev_…",
});

// Start only after your consent UI is approved.
const created = await session.create({ externalUserId: currentUser.id });
await room.connect(created.livekitUrl, created.deviceToken);
session.attach(room);
STEP 1

Complete the native LiveKit setup

Install the ScreenSteer tarball, @livekit/react-native, and livekit-client. Follow LiveKit’s native iOS and Android setup and call registerGlobals before creating rooms.

ScreenSteer supplies the validated protocol agent; LiveKit supplies native room, screen-share, and data-channel behavior.

STEP 2

Create and attach the session

After your view-consent UI is approved, call session.create, connect a Room with the returned URL and token, enable screen sharing, then attach the room.

Do not attach or publish capture before the user’s explicit approval.

STEP 3

Register actions with hooks

useScreenSteerAction registers a handler and reports its Pressable geometry. Normalize rectangles against the captured window dimensions.

Refresh geometry after rotation, navigation, scroll, or any layout transition.

RefreshButton.tsx
TypeScript
const action = useScreenSteerAction(session, {
  id: "workorders.refresh",
  kind: "button",
  label: "Refresh work orders",
  handler: () => store.refreshWorkOrders(),
});

return <Pressable onLayout={(event) =>
  action.reportRect(normalizeRect(
    event.nativeEvent.layout,
    Dimensions.get("window")
  ))
} />;
STEP 4

Render support and consent state

Use useScreenSteerState to render the persistent support indicator, laser overlay, pending control prompt, and Stop action.

Grant, reject, or revoke control from the device UI. End the ScreenSteer session and disconnect the room together.

What the device enforces

  • ●Separate device-owned view and control consent.
  • ●No raw touch injection; registered handlers only.
  • ●Expiry, sequence, controller, and layout-revision checks.
  • ●Every reliable command is acknowledged.

Smoke test

  1. 1Complete LiveKit native setup and run the target app on a device.
  2. 2Create a session after consent and enable native screen sharing.
  3. 3Join from the console and verify the capture track.
  4. 4Approve control and invoke a registered Pressable.
  5. 5Rotate the device and verify geometry refreshes.
  6. 6Revoke control and stop from the application.

Troubleshooting

Room or WebRTC APIs are undefined

Confirm registerGlobals ran before Room creation and the LiveKit native installation steps are complete.

Screen sharing starts but no action is targetable

Confirm onLayout reports a normalized rectangle and reruns after navigation or rotation.

The app remains connected after Stop

End the ScreenSteer session, stop the local screen-share track, detach the agent, and disconnect the LiveKit Room.