├── docs ├── installation.md ├── tools │ ├── network.md │ ├── storage.md │ ├── routes.md │ ├── react-query.md │ └── env.md ├── config.json ├── quick-start.md ├── floating-devtools.md ├── custom-tools.md └── overview.md ├── LICENSE └── README.md /docs/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installation 3 | id: installation 4 | --- 5 | 6 | Get Buoy running in your React Native app in minutes. 7 | 8 | ## Requirements 9 | 10 | 11 | 12 | ## Quick Start 13 | 14 | Install the core package and any tools you need: 15 | 16 | 17 | 18 | ## Available Packages 19 | 20 | Each package adds a new tool to your floating menu. Install only what you need. 21 | 22 | 23 | 24 | ## TypeScript Support 25 | 26 | All packages include TypeScript definitions out of the box. No additional `@types` packages needed. 27 | 28 | ## Next Steps 29 | 30 | - [Quick Start](./quick-start) — Basic setup guide 31 | - [FloatingDevTools](./floating-devtools) — Configuration options 32 | - [Custom Tools](./custom-tools) — Build your own debugging tools 33 | -------------------------------------------------------------------------------- /docs/tools/network.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Network Monitor 3 | id: tools-network 4 | --- 5 | 6 | See every API call your app makes. Request, response, headers, timing, errors — all in real-time with zero configuration. 7 | 8 | ## Supported Clients 9 | 10 | 11 | 12 | > **GraphQL gets special treatment** — Operation names are extracted from queries, mutations, and subscriptions, then displayed with variables using arrow notation: `GetUser › 123`. No more guessing which `/graphql` request is which. 13 | 14 | --- 15 | 16 | ## Installation 17 | 18 | 19 | 20 | That's it. The Network Monitor auto-detects and appears in your FloatingDevTools menu. 21 | 22 | --- 23 | 24 | ## What You See 25 | 26 | For every request: 27 | 28 | 29 | 30 | --- 31 | 32 | ## Status Colors 33 | 34 | 35 | 36 | --- 37 | 38 | ## What's Next 39 | 40 | - [Storage Inspector](./storage) — Browse and edit AsyncStorage & MMKV 41 | - [Environment Inspector](./env) — Validate env vars with type checking 42 | - [React Query](./react-query) — Inspect query cache and simulate states 43 | -------------------------------------------------------------------------------- /docs/tools/storage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Storage Explorer 3 | id: tools-storage 4 | --- 5 | 6 | Browse, edit, and manage all your app's persisted data. See every key-value pair across all storage backends in real-time. 7 | 8 | ## Supported Backends 9 | 10 | 11 | 12 | > **Multi-instance MMKV support** — If you use multiple MMKV instances, they're all detected automatically. Switch between instances and see key counts per instance. 13 | 14 | --- 15 | 16 | ## Installation 17 | 18 | 19 | 20 | That's it. The Storage Explorer auto-detects installed backends and appears in your FloatingDevTools menu. 21 | 22 | --- 23 | 24 | ## What You Can Do 25 | 26 | 27 | 28 | --- 29 | 30 | ## Smart Features 31 | 32 | **JSON formatting** — Values that are valid JSON are automatically pretty-printed for readability. 33 | 34 | **Live events** — Watch storage changes happen in real-time as your app reads and writes data. 35 | 36 | **Bulk selection** — Select multiple keys to delete or export them all at once. 37 | 38 | --- 39 | 40 | ## What's Next 41 | 42 | - [Network Monitor](./network) — See every API call your app makes 43 | - [Environment Inspector](./env) — Validate env vars with type checking 44 | - [React Query](./react-query) — Inspect query cache and simulate states 45 | -------------------------------------------------------------------------------- /docs/tools/routes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Route Inspector 3 | id: tools-routes 4 | --- 5 | 6 | See every route in your app and track navigation in real-time. Browse your sitemap, jump to any screen, and debug navigation issues instantly. 7 | 8 | ## Supported Libraries 9 | 10 | 11 | 12 | > **Auto-detection** — The Route Inspector automatically detects which navigation library you're using and adapts accordingly. 13 | 14 | --- 15 | 16 | ## Installation 17 | 18 | 19 | 20 | That's it. The Route Inspector auto-detects your navigation setup and appears in your FloatingDevTools menu. 21 | 22 | --- 23 | 24 | ## What You Can Do 25 | 26 | 27 | 28 | --- 29 | 30 | ## Route Types 31 | 32 | 33 | 34 | --- 35 | 36 | ## Event Timeline 37 | 38 | Every navigation is tracked with: 39 | 40 | - **Path** — Where you navigated to 41 | - **Params** — Route parameters passed 42 | - **Timestamp** — When it happened 43 | - **Duration** — Time since previous navigation 44 | 45 | --- 46 | 47 | ## What's Next 48 | 49 | - [Network Monitor](./network) — See every API call your app makes 50 | - [Storage Explorer](./storage) — Browse and edit AsyncStorage & MMKV 51 | - [React Query DevTools](./react-query) — Inspect query cache and simulate states 52 | -------------------------------------------------------------------------------- /docs/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/TanStack/tanstack.com/main/tanstack-docs-config.schema.json", 3 | "docSearch": { 4 | "appId": "", 5 | "apiKey": "", 6 | "indexName": "react-buoy" 7 | }, 8 | "sections": [ 9 | { 10 | "label": "Getting Started", 11 | "children": [ 12 | { 13 | "label": "Overview", 14 | "to": "overview" 15 | }, 16 | { 17 | "label": "Quick Start", 18 | "to": "quick-start" 19 | }, 20 | { 21 | "label": "Installation", 22 | "to": "installation" 23 | } 24 | ] 25 | }, 26 | { 27 | "label": "Core Concepts", 28 | "children": [ 29 | { 30 | "label": "FloatingDevTools", 31 | "to": "floating-devtools" 32 | }, 33 | { 34 | "label": "Custom Tools", 35 | "to": "custom-tools" 36 | } 37 | ] 38 | }, 39 | { 40 | "label": "Available Tools", 41 | "children": [ 42 | { 43 | "label": "Environment Inspector", 44 | "to": "tools/env" 45 | }, 46 | { 47 | "label": "Network Monitor", 48 | "to": "tools/network" 49 | }, 50 | { 51 | "label": "Storage Explorer", 52 | "to": "tools/storage" 53 | }, 54 | { 55 | "label": "React Query DevTools", 56 | "to": "tools/react-query" 57 | }, 58 | { 59 | "label": "Route Inspector", 60 | "to": "tools/routes" 61 | } 62 | ] 63 | } 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /docs/tools/react-query.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Query DevTools 3 | id: tools-react-query 4 | --- 5 | 6 | Full TanStack Query inspection for React Native. Browse queries, view cached data, simulate states, and debug your data fetching in real-time. 7 | 8 | ## Installation 9 | 10 | 11 | 12 | That's it. The React Query DevTools auto-detects your QueryClient and appears in your FloatingDevTools menu. 13 | 14 | --- 15 | 16 | ## Query States 17 | 18 | 19 | 20 | --- 21 | 22 | ## What You Can Do 23 | 24 | 25 | 26 | > **Simulate loading & error states** — Test how your UI handles loading spinners and error boundaries without waiting for real network conditions. 27 | 28 | --- 29 | 30 | ## Mutations 31 | 32 | Track all your mutations in real-time: 33 | 34 | - **Status** — idle, pending, success, or error 35 | - **Variables** — data passed to the mutation 36 | - **Response** — returned data or error message 37 | - **Timing** — when the mutation was submitted 38 | 39 | --- 40 | 41 | ## WiFi Toggle 42 | 43 | Simulate offline mode with one tap. The WiFi toggle controls React Query's `onlineManager` to pause all queries — perfect for testing offline-first features. 44 | 45 | --- 46 | 47 | ## What's Next 48 | 49 | - [Network Monitor](./network) — See every API call your app makes 50 | - [Storage Explorer](./storage) — Browse and edit AsyncStorage & MMKV 51 | - [Environment Inspector](./env) — Validate env vars with type checking 52 | -------------------------------------------------------------------------------- /docs/quick-start.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Quick Start 3 | id: quick-start 4 | --- 5 | 6 | From zero to debugging in under 2 minutes. 7 | 8 | ## 1. Install the core 9 | 10 | 11 | 12 | ## 2. Add to your app 13 | 14 | Drop `FloatingDevTools` at the root of your app: 15 | 16 | ```tsx 17 | import { FloatingDevTools } from "@react-buoy/core"; 18 | 19 | export default function App() { 20 | return ( 21 | <> 22 | 23 | 24 | 25 | ); 26 | } 27 | ``` 28 | 29 | A floating button appears in the corner of your app. Tap it to open the menu. 30 | 31 | ## 3. Add tools 32 | 33 | Install any tool package — it automatically appears in the menu. No wiring, no config. 34 | 35 | 36 | 37 | That's it. Open the menu, tap Network, and you're watching every API call in real-time. 38 | 39 | ## Available tools 40 | 41 | 42 | 43 | Install what you need. Skip what you don't. 44 | 45 | ## Control who sees devtools 46 | 47 | Only show devtools to specific users — admins, QA, internal team members, or whoever your business needs: 48 | 49 | ```tsx 50 | import { FloatingDevTools } from "@react-buoy/core"; 51 | 52 | export default function App() { 53 | const { user } = useAuth(); 54 | 55 | // Only render for internal users, admins, or QA 56 | const showDevTools = 57 | user?.role === "admin" || 58 | user?.role === "qa" || 59 | user?.email?.endsWith("@yourcompany.com"); 60 | 61 | return ( 62 | <> 63 | 64 | {showDevTools && ( 65 | 69 | )} 70 | 71 | ); 72 | } 73 | ``` 74 | 75 | Or keep it available for everyone — your QA and support teams will thank you. 76 | 77 | ## What's next 78 | 79 | - [FloatingDevTools](./floating-devtools) — Core component reference 80 | - [Custom Tools](./custom-tools) — Build your own debugging tools 81 | -------------------------------------------------------------------------------- /docs/floating-devtools.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FloatingDevTools 3 | id: floating-devtools 4 | --- 5 | 6 | The `FloatingDevTools` component is the entry point for React Buoy. It renders a draggable floating button that opens a menu containing all your installed debugging tools. 7 | 8 | ## Basic Usage 9 | 10 | ```tsx 11 | import { FloatingDevTools } from "@react-buoy/core"; 12 | 13 | function App() { 14 | return ( 15 | <> 16 | 17 | 18 | 19 | ); 20 | } 21 | ``` 22 | 23 | That's it. Any Buoy tool packages you've installed will automatically appear in the menu. 24 | 25 | ## Environment Badge 26 | 27 | The floating button displays your current environment, helping your team instantly know where they are: 28 | 29 | ```tsx 30 | 31 | ``` 32 | 33 | Common values: `"local"`, `"dev"`, `"staging"`, `"qa"`, `"production"` 34 | 35 | ## How Tools Auto-Register 36 | 37 | When you install a Buoy tool package (like `@react-buoy/network` or `@react-buoy/storage`), it automatically registers itself with the floating menu. No imports, no configuration, no wiring. 38 | 39 | ```bash 40 | npm install @react-buoy/network 41 | ``` 42 | 43 | The Network tool now appears in your menu. That's the magic of Buoy. 44 | 45 | ## Custom Tools 46 | 47 | Need something specific to your app? Add your own tools: 48 | 49 | ```tsx 50 | import { FloatingDevTools } from "@react-buoy/core"; 51 | 52 | const FeatureFlagTool = () => ( 53 | 54 | Toggle feature flags here 55 | 56 | ); 57 | 58 | function App() { 59 | return ( 60 | 70 | ); 71 | } 72 | ``` 73 | 74 | See [Custom Tools](./custom-tools) for more details on building your own debugging tools. 75 | 76 | ## Draggable Button 77 | 78 | The floating button can be dragged anywhere on screen. It remembers its position between sessions, so it stays where your team likes it. 79 | 80 | ## Next Steps 81 | 82 | - [Custom Tools](./custom-tools) — Build team-specific debugging tools 83 | - [Quick Start](./quick-start) — Full setup walkthrough 84 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | PROPRIETARY SOFTWARE LICENSE 2 | 3 | Copyright (c) 2024-present React Buoy. All rights reserved. 4 | 5 | This software and its source code are proprietary and confidential. 6 | 7 | NOTICE: This is NOT open source software. This software is licensed, 8 | not sold, and is protected by copyright laws and international treaties. 9 | 10 | TERMS AND CONDITIONS: 11 | 12 | 1. LICENSE GRANT 13 | Subject to the terms of this Agreement and payment of applicable fees, 14 | React Buoy grants you a limited, non-exclusive, non-transferable license 15 | to use the compiled software packages in your applications. 16 | 17 | 2. RESTRICTIONS 18 | You may NOT: 19 | - Copy, modify, or distribute the source code 20 | - Reverse engineer, decompile, or disassemble the software 21 | - Remove or alter any proprietary notices or labels 22 | - Sublicense, rent, lease, or lend the software 23 | - Use the software to create competing products 24 | - Share access credentials with unauthorized parties 25 | 26 | 3. OWNERSHIP 27 | React Buoy retains all right, title, and interest in the software, 28 | including all intellectual property rights. This license does not 29 | grant you any rights to trademarks or service marks. 30 | 31 | 4. TERMINATION 32 | This license is effective until terminated. Your rights under this 33 | license will terminate automatically without notice if you fail to 34 | comply with any of its terms. Upon termination, you must cease all 35 | use and destroy all copies of the software. 36 | 37 | 5. DISCLAIMER OF WARRANTIES 38 | THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, 39 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 40 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. 41 | 42 | 6. LIMITATION OF LIABILITY 43 | IN NO EVENT SHALL REACT BUOY BE LIABLE FOR ANY INDIRECT, INCIDENTAL, 44 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES ARISING OUT OF OR IN 45 | CONNECTION WITH THIS LICENSE OR THE USE OF THE SOFTWARE. 46 | 47 | 7. GOVERNING LAW 48 | This Agreement shall be governed by and construed in accordance with 49 | the laws of the United States, without regard to its conflict of 50 | law provisions. 51 | 52 | For licensing inquiries and subscription information: 53 | - Website: https://buoy.gg 54 | - Email: austinlovesworking@gmail.com 55 | 56 | Unauthorized reproduction or distribution of this software, or any 57 | portion of it, may result in severe civil and criminal penalties, 58 | and will be prosecuted to the maximum extent possible under the law. 59 | -------------------------------------------------------------------------------- /docs/custom-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Custom Tools 3 | id: custom-tools 4 | --- 5 | 6 | React Buoy is fully extensible. You can add any React component as a custom debugging tool. 7 | 8 | ## Basic Custom Tool 9 | 10 | ```tsx 11 | import { FloatingDevTools } from "@react-buoy/core"; 12 | import { View, Text, Button } from "react-native"; 13 | 14 | const CacheDebugger = () => { 15 | const clearCache = () => { 16 | // Your cache clearing logic 17 | }; 18 | 19 | return ( 20 | 21 | Cache Status: 42 items 22 |