@planningcenter/olio-dev-tools

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

Installation

Install as a dev dependency:

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).

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

Viewing what's in Async Storage

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

Overriding network requests

• 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.

Log configurations

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().

Jolt subscriptions viewer

• 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.

React navigation helper

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

Environment selector

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