@planningcenter/olio-dev-tools

Developer tools for Olio-powered React Native apps, surfaced via Expo DevTools.

Installation

Install as a dev dependency:

``sh
npm install -D @planningcenter/olio-dev-tools
`

The useOlioDevTools hook is a no-op in production; it only activates in development.

Quick Start

Call useOlioDevTools from a component that has access to:
- a React Navigation navigation object, and
- a Jolt client that supports setOnStateChangeHandlerForDev(handler).

`tsx
import JoltClient from "@planningcenter/jolt-client";
import { useOlioDevTools } from "@planningcenter/olio-dev-tools";
import { useNavigation } from "@react-navigation/native";
import { useState } from "react";

function DevToolsBridge() {
const navigation = useNavigation();
const [environment, setEnvironment] = useState("staging");

const jolt = new JoltClient(/ ... /) as JoltClient & {
setOnStateChangeHandlerForDev: (state: any) => void;
};

useOlioDevTools({
navigation,
environment,
onEnvironmentChange: setEnvironment,
jolt,
});

return null;
}
`

Open your app in Expo DevTools. The Olio Dev Tools panel will appear and stay in sync with the running app.

Features

$3


- Lists all keys from AsyncStorage.getAllKeys() (sorted).
- Selecting a key fetches its value via AsyncStorage.getItem(key) and displays it.

$3

- Create per-URL overrides that return a stubbed { status, data? } response.
- Toggle overrides ON/OFF globally.
- Overrides are applied via Olio’s RequestManager filters (setFilters) and override enable/disable APIs.

$3

Two separate logging-related tools are exposed:

- Request logging (network)
- Toggle request logging ON/OFF.
- Configure what gets logged:
- initial: include an initial log entry
- startTime: include start time (when initial is enabled)
- end: include finished log entry
- duration: include duration (when end is enabled)
- responses: include response objects (when end is enabled)

- Log filters (app logs)
- Toggle filters ON/OFF globally.
- Add/remove filters across four buckets:
- typeIs, typeIsNot, contains, doesNotContain
- Filters are persisted via Olio’s LogManager.saveFilters().

$3


- Shows the current connection ID and active channel subscriptions.
- Each channel includes a subscriber count, which is helpful for spotting duplicate subscribes.
- DevTools stays updated as Jolt state changes via setOnStateChangeHandlerForDev.

$3

- Navigate to any route name from DevTools.
- Supports arbitrary key/value parameters; the app calls navigation.navigate(route, params).

$3

- Switch between Development / Staging / Production.
- When changed, DevTools calls onEnvironmentChange(newEnv)` so your app can retarget endpoints.