infinitered / infinitered/reactotron
Application won't connect to Reactotron (iOS Simulator)
- Dominant language
- TypeScript
- Stars
- 15.6k
- Forks
- 972
- PR merge metrics
- No merged PRs in 30d
Description
When running my application in the iOS Mac Simulator, it won't connect to Reactotron even if I should have the good configuration.
My configuration used to work before, but after some changes it doesn't anymore. I checked with the demo app and it's correctly connecting.
Package.json
```
{
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"ios8": "react-native run-ios --simulator=\"iPhone 8\"",
"start": "react-native start",
"lint": "eslint .",
"lint:fix": "yarn lint --fix",
"storybook": "start-storybook -p 7007",
"test": "TZ=UTC jest --watch",
"test:ci": "TZ=UTC jest --coverage --maxWorkers=2",
"generate:icon": "react-native set-icon --path assets/logo/logo.jpg --platform all",
"generate:splash": "react-native set-splash --path assets/splash/splash.png --resize cover --background #f55b3a"
},
"husky": {
"hooks": {
"pre-push": "yarn lint"
}
},
"dependencies": {
"@mindinventory/react-native-tab-bar-interaction": "mindinventory/react-native-tab-bar-interaction",
"@react-native-community/async-storage": "^1.8.1",
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/bottom-tabs": "^5.2.1",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
"axios": "^0.19.2",
"i18n": "^0.8.5",
"i18n-js": "^3.5.1",
"immutable": "^4.0.0-rc.12",
"native-base": "^2.13.12",
"react": "^16.13.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.6.0",
"react-native-global-props": "^1.1.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^1.3.4",
"react-native-paper": "^3.6.0",
"react-native-screens": "^2.3.0",
"react-native-snap-carousel": "^3.8.4",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.0.3",
"react-native-swiper": "^1.6.0-nightly.5",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.2.2",
"react-navigation-material-bottom-tabs": "^2.2.4",
"react-navigation-tabs": "^2.8.2",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-persist-transform-expire": "^0.0.2",
"redux-persist-transform-immutable": "^5.0.0",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@bam.tech/react-native-make": "^2.0.0",
"@react-native-community/eslint-config": "^0.0.5",
"@storybook/addon-actions": "^5.3.17",
"@storybook/addon-links": "^5.3.17",
"@storybook/addons": "^5.3.17",
"@storybook/react-native": "^5.3.17",
"@storybook/react-native-server": "^5.3.17",
"@testing-library/react-native": "^5.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^6.5.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.4.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-import-resolver-babel-module": "^5.1.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^22.17.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^2.1.2",
"eslint-plugin-redux-saga": "1.0.0",
"eslint-plugin-standard": "^4.0.1",
"husky": "^4.2.3",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"prettier": "^1.18.2",
"react-dom": "^16.13.0",
"react-test-renderer": "^16.13.1",
"reactotron-react-native": "^4.0.3",
"reactotron-redux": "^3.1.2",
"reactotron-redux-saga": "^4.2.3"
},
"jest": {
"preset": "react-native",
"transform": {
"node_modules/react-native/.+\\.js$": "/node_modules/react-native/jest/preprocessor.js"
}
}
```
Here are my app configs :
reactotron.js :
```
/* eslint-disable no-console */
/* global __DEV__ */
import Reactotron from 'reactotron-react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { reactotronRedux } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';
const reactotron = Reactotron.setAsyncStorageHandler(AsyncStorage);
// connecting the app
reactotron.configure();
// plugins
reactotron.useReactNative({
storybook: true,
});
reactotron.use(
reactotronRedux({
isActionImportant: action => action.type.startsWith('core/'),
}),
);
reactotron.use(sagaPlugin());
if (__DEV__) {
Reactotron.connect();
Reactotron.clear();
}
if (__DEV__) {
console.tron = Reactotron.logImportant;
} else {
console.tron = console.error;
}
export default reactotron;
```
I checked with reactotron react-native demo app to compare if it's a port / hostname error, and I have exactly the same outputs when checking my ports :
My app :

The demo app which is correctly connecting to reactotron :

Contributor guide
Research direction
Start by comparing reactotron.js and package.json with the Reactotron React Native demo app, then reproduce the connection failure in the iOS Simulator. Check whether the same configuration and ports are used; done means the application connects to Reactotron as the demo does.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, javascript, react-native
- Domain
- desktop, devtools, networking
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100