@buoy-gg/debug-borders
v6.0.1
Published
Layout debugging borders for React Native — depth-colored, touch-through, tap any label to inspect testIDs & styles. Part of Buoy devtools.
Readme
@buoy-gg/debug-borders
See your React Native layout instead of guessing at it — depth-colored borders over every component, and tap any label to inspect its testID, styles, and exact position on-device.
Part of Buoy — devtools that live inside your React Native app. Install it and it auto-appears in the floating menu from @buoy-gg/core.
Install
npm install @buoy-gg/core @buoy-gg/debug-bordersQuick start
import { FloatingDevTools } from "@buoy-gg/core";
export default function App() {
return (
<>
<YourApp />
<FloatingDevTools />
</>
);
}Tap the BORDERS icon in the floating menu to cycle Off → Borders → Labels.
Want your own naming or colors? Build the tool with createDebugBordersTool({ name: "LAYOUT", bordersColor: "#ec4899", ... }) and pass it to FloatingDevTools via the apps array.
What you get
- Depth-colored borders — rainbow borders on every component, colored by depth in the tree, fully touch-through so they never block interaction.
- Labels mode — filters down to components with a
testIDoraccessibilityLabel: green = testID, pink = accessibilityLabel. Labels sit above their boxes and stack automatically when they overlap. - Tap to inspect — tap any label for the component's
testID,accessibilityLabel,nativeID, key, accessibility props, full computed styles, and exact position and size. - Answers real questions on-device — "what testID does QA need for this button?" or "which component owns this padding?" without leaving the phone.
- Stays out of the way — borders auto-hide on inactive screens in stack navigators and whenever a DevTools modal is open, and they track layout changes automatically.
- Works everywhere — Expo and React Native CLI, Fabric (New Architecture) and Paper.
Desktop & AI
The same live session streams to Buoy Desktop (free, macOS/Windows/Linux) and to Claude Code or Cursor via the Buoy MCP server.
Free vs Pro
Every tool is free. Pro unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for everyone.
Proprietary software. © Buoy LLC. Terms
