From 8d4df13f095dbfbfdf40d6411567cb07ccb2fe20 Mon Sep 17 00:00:00 2001 From: Daniel Dunderfelt Date: Wed, 25 Jun 2025 21:29:39 +0300 Subject: [PATCH 1/3] Add expo universal guide. --- docs/quick-start/expo-web-and-native.md | 85 +++++++++++++++++++++++++ docs/quick-start/react-native.md | 2 + docs/troubleshooting.md | 6 ++ 3 files changed, 93 insertions(+) create mode 100644 docs/quick-start/expo-web-and-native.md diff --git a/docs/quick-start/expo-web-and-native.md b/docs/quick-start/expo-web-and-native.md new file mode 100644 index 000000000..5b9cf2326 --- /dev/null +++ b/docs/quick-start/expo-web-and-native.md @@ -0,0 +1,85 @@ +--- +id: expo-web-and-native +title: Expo Web and Native +--- + +# Quick Start for Expo targeting Web and Native + +To run Reactotron in an Expo app where you target both web and native platforms, you need to combine the "react-js" and "react-native" setup, and leverage the platform file extensions to load the right config for the current platform. + +If you are only targeting native platforms, or only targeting the web platform, you can use the [react-native](./react-native.md) or [react-js](./react-js.md) guides respectively. + +## Installing Reactotron.app + +Let’s [download the desktop app](https://github.com/infinitered/reactotron/releases?q=reactotron-app&expanded=true) to start. You can download for Linux, Windows, and Mac. + +Unzip & run. + +![Installing The App](./images/react-js/installing.jpg) + +## Configure Reactotron with your project + +#### **Step 1 - Add Reactotron as DEV dependency** + +Add Reactotron, in both react-native and react-js flavors, in your Expo project as a dev dependency. + +``` +npm i --save-dev reactotron-react-native reactotron-react-js +``` + +``` +yarn add reactotron-react-native reactotron-react-js -D +``` + +#### **Step 2 - Initialization** + +Create a file in your root folder `ReactotronConfig.native.js` and paste this: + +```js +import Reactotron from "reactotron-react-native"; + +Reactotron.configure() // controls connection & communication settings + .useReactNative() // add all built-in react native plugins + .connect(); // let's connect! +``` + +See the [react-native page](./react-native.md) if you want to customize Reactotron for React-native further. + +Then create another file in your root folder named `ReactotronConfig.web.js` and paste this: + +```js +import Reactotron from "reactotron-react-js" + +Reactotron.configure() // we can use plugins here + .connect() // let's connect! +``` + +#### **Step 3 - Add Reactotron to your app** + +Finally, we import this the `app/_layout.js` file which is the lowest-level file that Expo Router gives us access to. + +After the imports: + +```js +if (__DEV__) { + require("../ReactotronConfig"); // Or "../../ReactotronConfig" if you use a /src folder. +} +``` + +Expo will load either the native or the web flavor of ReactotronConfig based on the platform it is running in. At this point, Reactotron is hooked up. **HOUSTON, WE HAVE A CONNECTION!** + +Refresh your app (or start it up with `expo start`) and have a look at Reactotron now. Do you see the `CONNECTION` line? Click that to expand. + +![We Have Contact](./images/react-native/first-connect.jpg) + +Go back to your app and refresh it 5 or 6 times. Now look. + +![Chatty](./images/react-native/spammy.jpg) + +## Troubleshooting + +**Android**: If you are using an Android device or an emulator run the following command to make sure it can connect to Reactotron: + +``` +adb reverse tcp:9090 tcp:9090 +``` diff --git a/docs/quick-start/react-native.md b/docs/quick-start/react-native.md index 9b19a337a..14581730f 100644 --- a/docs/quick-start/react-native.md +++ b/docs/quick-start/react-native.md @@ -5,6 +5,8 @@ title: react-native # Quick Start for React Native +If you are using Expo *and* targeting *both* the native and web platforms, follow the [expo-web-and-native](./expo-web-and-native.md) guide instead. + ## Installing Reactotron.app Let’s [download the desktop app](https://github.com/infinitered/reactotron/releases?q=reactotron-app&expanded=true) to start. You can download for Linux, Windows, and Mac. diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 09e0c9569..521b78e37 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -52,3 +52,9 @@ and reload the app on your device. This only works on Android 5.x+. As of 1.1.4, the proper IP address is auto-discovered. Simply leave the `configure` as is. + +## Web + +If you are using Expo and opening your app in a browser, having only integrated Reactotron for the native side, you will see some confusing errors. + +In this case you need to integrate Reactotron for *both* web and native by following this guide: [expo-web-and-native](./quick-start/expo-web-and-native.md) \ No newline at end of file From 24e5a5c2753e683dbe9d04301f022723a74072f7 Mon Sep 17 00:00:00 2001 From: Daniel Dunderfelt Date: Wed, 25 Jun 2025 21:37:08 +0300 Subject: [PATCH 2/3] Fix language in expo docs. --- docs/quick-start/expo-web-and-native.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/quick-start/expo-web-and-native.md b/docs/quick-start/expo-web-and-native.md index 5b9cf2326..af5fcb2e1 100644 --- a/docs/quick-start/expo-web-and-native.md +++ b/docs/quick-start/expo-web-and-native.md @@ -56,7 +56,7 @@ Reactotron.configure() // we can use plugins here #### **Step 3 - Add Reactotron to your app** -Finally, we import this the `app/_layout.js` file which is the lowest-level file that Expo Router gives us access to. +Finally, we import the configuration in the `app/_layout.js` file which is the lowest-level file that Expo Router gives us access to. After the imports: From 080d39253f9e950332fd033064de476211d6b3c3 Mon Sep 17 00:00:00 2001 From: Daniel Dunderfelt Date: Wed, 25 Jun 2025 21:38:04 +0300 Subject: [PATCH 3/3] Fix language in troubleshooting docs. --- docs/troubleshooting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 521b78e37..0c31271ba 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -55,6 +55,6 @@ As of 1.1.4, the proper IP address is auto-discovered. Simply leave the `configu ## Web -If you are using Expo and opening your app in a browser, having only integrated Reactotron for the native side, you will see some confusing errors. +If you are using Expo and open your app in a browser, having only integrated Reactotron for the native side, you will see some confusing errors. In this case you need to integrate Reactotron for *both* web and native by following this guide: [expo-web-and-native](./quick-start/expo-web-and-native.md) \ No newline at end of file