|
| 1 | +--- |
| 2 | +slug: /debugging |
| 3 | +sidebar_label: Debugging |
| 4 | +title: Debugging |
| 5 | +id: debugging |
| 6 | +keywords: [debugging, reactotron] |
| 7 | +--- |
| 8 | + |
| 9 | +Found a bug in your app? It can be difficult to identify, especially if you're unsure whether it's related to the network or not. |
| 10 | +In our boilerplate, we've seamlessly integrated [Reactotron](https://github.com/infinitered/reactotron), a powerful desktop app for inspecting React Native projects. |
| 11 | +Reactotron is invaluable during development, offering an easy way to view your application's logs, async storage, network calls, and state. |
| 12 | + |
| 13 | +### Setup |
| 14 | +By default, the boilerplate comes with Reactotron already configured, saving you time and effort. |
| 15 | +However, if you ever need to fine-tune your Reactotron settings to better suit your |
| 16 | +project's requirements, rest assured that it's a breeze to do so. |
| 17 | + |
| 18 | +Simply navigate to the `./ReactotronConfig.js` file, where you'll find |
| 19 | +the Reactotron configuration. By default, we've set it up to use the configuration suitable for development environment, ensuring a smooth and hassle-free experience from the get-go. |
| 20 | + |
| 21 | + |
| 22 | +```typescript |
| 23 | +import Reactotron from 'reactotron-react-native'; |
| 24 | +import mmkvPlugin from 'reactotron-react-native-mmkv'; |
| 25 | +import { |
| 26 | + QueryClientManager, |
| 27 | + reactotronReactQuery, |
| 28 | +} from 'reactotron-react-query'; |
| 29 | + |
| 30 | +import { storage, queryClient } from './src/App'; |
| 31 | +import config from './app.json'; |
| 32 | + |
| 33 | +const queryClientManager = new QueryClientManager({ |
| 34 | + queryClient, |
| 35 | +}); |
| 36 | + |
| 37 | +// highlight-next-line |
| 38 | +// You can change the storage configuration here |
| 39 | +Reactotron.configure({ |
| 40 | + name: config.name, |
| 41 | + onDisconnect: () => { |
| 42 | + queryClientManager.unsubscribe(); |
| 43 | + }, |
| 44 | +}) |
| 45 | + .useReactNative() |
| 46 | + // highlight-next-line |
| 47 | + .use(mmkvPlugin({ storage })) // We use the mmkv plugin to store the Reactotron state |
| 48 | + // highlight-next-line |
| 49 | + .use(reactotronReactQuery(queryClientManager)) // We use the react-query plugin to store the Reactotron state |
| 50 | + .connect(); |
| 51 | +``` |
| 52 | + |
| 53 | +### Going Further |
| 54 | +For a deeper dive into the world of debugging with |
| 55 | +[Reactotron](https://github.com/infinitered/reactotron), |
| 56 | +we invite you to explore its comprehensive documentation. |
| 57 | +There, you'll find valuable insights and detailed guidance on harnessing the full potential |
| 58 | +of this tool to enhance your app's debugging process. |
| 59 | + |
| 60 | +:::info |
| 61 | + We use Reactotron while the official React-Native Debugger is not stable. We recommend using Reactotron for debugging purposes. |
| 62 | +::: |
0 commit comments