@buoy-gg/debug-borders 7.0.35 → 7.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -5
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@buoy-gg/debug-borders) [](https://www.npmjs.com/package/@buoy-gg/debug-borders)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Show layout borders and component labels over your React Native app. Tap a label to inspect the component’s available properties.
|
|
6
6
|
|
|
7
|
-
Part of [Buoy](https://github.com/Buoy-gg/buoy)
|
|
7
|
+
Part of [Buoy](https://github.com/Buoy-gg/buoy). Install the package, complete account setup, and follow the integration steps below.
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
@@ -14,6 +14,24 @@ Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside yo
|
|
|
14
14
|
npm install @buoy-gg/core @buoy-gg/debug-borders
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
+
## Before you start
|
|
18
|
+
|
|
19
|
+
Use a development build with `@buoy-gg/core` and a Free or Pro Buoy account key. From your app’s directory, sign in:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npx --package=@buoy-gg/core buoy login
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
For Expo, initialize Buoy before rendering the menu:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { Buoy } from "@buoy-gg/core";
|
|
29
|
+
|
|
30
|
+
Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
|
|
34
|
+
|
|
17
35
|
## Quick start
|
|
18
36
|
|
|
19
37
|
```tsx
|
|
@@ -33,6 +51,10 @@ Tap the BORDERS icon in the floating menu to cycle Off → Borders → Labels.
|
|
|
33
51
|
|
|
34
52
|
Want your own naming or colors? Build the tool with `createDebugBordersTool({ name: "LAYOUT", bordersColor: "#ec4899", ... })` and pass it to `FloatingDevTools` via the `apps` array.
|
|
35
53
|
|
|
54
|
+
## Check the integration
|
|
55
|
+
|
|
56
|
+
Enable borders on a known screen, then tap a component label and inspect its properties. Border drawing and label interaction differ: the labels are intentionally tappable.
|
|
57
|
+
|
|
36
58
|
## What you get
|
|
37
59
|
|
|
38
60
|
- **Depth-colored borders** — rainbow borders on every component, colored by depth in the tree, fully touch-through so they never block interaction.
|
|
@@ -44,11 +66,11 @@ Want your own naming or colors? Build the tool with `createDebugBordersTool({ na
|
|
|
44
66
|
|
|
45
67
|
## Desktop & AI
|
|
46
68
|
|
|
47
|
-
|
|
69
|
+
To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
|
|
48
70
|
|
|
49
|
-
##
|
|
71
|
+
## Account and plan requirements
|
|
50
72
|
|
|
51
|
-
|
|
73
|
+
Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
|
|
52
74
|
|
|
53
75
|
---
|
|
54
76
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@buoy-gg/debug-borders",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.38",
|
|
4
4
|
"description": "Layout debugging borders for React Native — depth-colored, touch-through, tap any label to inspect testIDs & styles. Part of Buoy devtools.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
],
|
|
27
27
|
"sideEffects": false,
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@buoy-gg/core": "^7.0.
|
|
30
|
-
"@buoy-gg/shared-ui": "^7.0.
|
|
29
|
+
"@buoy-gg/core": "^7.0.38",
|
|
30
|
+
"@buoy-gg/shared-ui": "^7.0.38"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"react": "*",
|
|
34
34
|
"react-native": "*",
|
|
35
|
-
"@buoy-gg/license": "7.0.
|
|
35
|
+
"@buoy-gg/license": "7.0.38"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@types/react": "^19.1.0",
|
|
39
39
|
"@types/react-native": "^0.73.0",
|
|
40
40
|
"typescript": "~5.8.3",
|
|
41
|
-
"@buoy-gg/license": "^7.0.
|
|
41
|
+
"@buoy-gg/license": "^7.0.38"
|
|
42
42
|
},
|
|
43
43
|
"react-native-builder-bob": {
|
|
44
44
|
"source": "src",
|