So I cloned a React Native app from Github and noticed this package called Reactotron, what is that I wondered? I looked it up, it's like Redux DevTools, why not avail myself of its capabilities?
I downloaded Reactotron UI for Mac and I have refreshed my simulator various times and no connection.
This is my very first time even learning about this tool which sounds great.
This is the codebase where I saw Reactotron setup as the guys at InfiniteRed have suggested:
import Reactotron, {
trackGlobalErrors,
openInEditor,
networking,
} from 'reactotron-react-native';
import {reactotronRedux} from 'reactotron-redux';
Reactotron.configure({
name: 'AppName - Mobile',
})
.useReactNative()
.use(reactotronRedux())
.use(trackGlobalErrors())
.use(openInEditor())
.use(networking());
//eslint-disable-next-line
if (__DEV__) {
Reactotron.connect();
Reactotron.clear();
//eslint-disable-next-line
debug = (title, data={}) =>
Reactotron.display({
name: title,
value: data,
preview: JSON.stringify(data).substr(0, 50),
});
}
Is there anything missing in this code that can explain my lack of connection?
And there is nothing in the package.json file that provides a script to make a connection:
{
"name": "AppName",
"version": "3.0",
"private": true,
"scripts": {
"start": "nps",
"test": "nps setup",
"build": "nps build",
"setup": "nps setup && nps appcenter",
"postinstall": "rm -f ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json"
},
"dependencies": {
"appcenter": "1.2.0",
"appcenter-analytics": "1.2.0",
"appcenter-crashes": "1.2.0",
"axios": "0.16.2",
"date-fns": "1.29.0",
"lodash": "4.17.4",
"moment": "2.20.1",
"payment": "2.3.0",
"prop-types": "15.6.0",
"react": "16.2.0",
"react-native": "0.53.3",
"react-native-autoheight-webview": "0.6.1",
"react-native-calendar-events": "1.6.1",
"react-native-device-info": "0.21.5",
"react-native-exception-handler": "2.8.9",
"react-native-image-progress": "1.0.1",
"react-native-immediate-phone-call": "1.0.0",
"react-native-input-scroll-view": "1.6.7",
"react-native-keyboard-aware-scroll-view": "0.4.4",
"react-native-keyboard-manager": "4.0.13-12",
"react-native-material-buttons": "0.5.0",
"react-native-material-dropdown": "0.5.2",
"react-native-material-tabs": "3.5.0",
"react-native-material-textfield": "0.10.0",
"react-native-onesignal": "3.2.12",
"react-native-popup-menu": "0.8.3",
"react-native-sentry": "0.32.0",
"react-native-size-matters": "0.1.0",
"react-native-spinkit": "1.1.1",
"react-native-splash-screen": "3.0.6",
"react-native-svg": "6.3.1",
"react-native-swipe-view": "https://github.com/jjd314/react-native-swipe-view",
"react-native-vector-icons": "^6.4.2",
"react-native-xcode-packager": "0.1.0",
"react-navigation": "1.5.11",
"react-redux": "5.0.6",
"recompose": "0.26.0",
"redux": "3.7.2",
"redux-thunk": "2.2.0",
"replace-in-file": "3.1.1"
},
"devDependencies": {
"async": "2.6.0",
"babel-cli": "6.24.1",
"babel-eslint": "8.0.2",
"babel-jest": "23.0.0",
"babel-plugin-module-resolver": "3.0.0",
"babel-preset-env": "1.4.0",
"babel-preset-flow": "6.23.0",
"babel-preset-react-native": "4.0.0",
"babel-preset-stage-2": "6.24.1",
"babel-watch": "2.0.6",
"chalk": "1.1.3",
"detox": "8.2.3",
"eslint": "4.12.0",
"eslint-import-resolver-babel-module": "4.0.0-beta.3",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-prettier": "2.3.1",
"eslint-plugin-react": "7.5.1",
"flow-bin": "0.46.0",
"fs-extra": "5.0.0",
"jest": "23.6.0",
"nps": "5.7.1",
"nps-utils": "1.5.0",
"patch-package": "5.1.1",
"postinstall-prepare": "1.0.1",
"prettier": "1.8.2",
"prettier-eslint": "8.2.2",
"react-test-renderer": "16.2.0",
"reactotron-react-native": "1.14.0",
"reactotron-redux": "1.13.0",
"redux-mock-store": "1.3.0",
"yargs": "8.0.1"
},
"jest": {
"preset": "react-native",
"setupTestFrameworkScriptFile": "./jest-setup.js",
"transformIgnorePatterns": [
"/node_modules/(?!parse)/"
],
"unmockedModulePathPatterns": [
"react",
"react-navigation",
"axios",
"redux",
"redux-thunk",
"lodash",
"date-fns"
],
"verbose": true
},
"detox": {
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/NFIBEngage.app",
"build": "xcodebuild -workspace ios/NFIBEngage.xcworkspace -configuration Debug -scheme NFIBEngage -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone 6"
}
},
"test-runner": "jest"
}
}
The Reactotron configuration file was imported into the App.js file like so:
//eslint-disable-next-line
console.ignoredYellowBox = ["Setting a timer"];
import './ReactotronConfig';
import React, {PureComponent} from 'react';
import {
StyleSheet,
View,
StatusBar,
Linking,
Platform,
Alert,
} from 'react-native';
import {applyMiddleware, compose, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import Reactotron from 'reactotron-react-native';
import logger from 'logger';
import OneSignal from 'react-native-onesignal';
import SplashScreen from 'react-native-splash-screen';
import {Sentry} from 'react-native-sentry';
import {
setJSExceptionHandler,
setNativeExceptionHandler,
} from 'react-native-exception-handler';
import {jsHandler, nativeHandler} from 'utils/error-handlers';
import RootNavigation from 'navigation/RootNavigation';
import LocalStorage from 'services/LocalStorage';
import reducers from 'reducers';
import {
setCurrentUser,
validateUserInformationForVoterVoice,
} from 'auth/loginActions';
import {handleEventsDeepLink} from 'events/actions';
import {handleBallotsDeepLink} from 'surveys-ballots/actions';
import {setResetPasswordKey} from 'auth/registrationActions';
import {setNotificationData, deepLinkReceived} from 'navigation/actions';
import {view} from 'utils/view';
import {v2Colors} from 'theme';
import env from 'env';
import base from 'base-endpoint';
import * as appcenter from 'utils/appcenterLogger';
import * as cache from 'utils/cache';
import * as regex from 'utils/helpers/regex';
const appReducer = combineReducers({
...reducers,
});
const middleware = applyMiddleware(thunkMiddleware);
//react-native-debugger config
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = Reactotron.createStore(appReducer, composeEnhancers(middleware));
You need to import your reactotron configuration file in: - App.js (if your project was created using Create React Native App) or - index.js on line 1:
import 'pathtofile/ReactotronConfig.js';
you can also take a look at this link for start guide. https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md
i created a project from scratch and it did work for me it seems that the problem is the version of this two packages, try updating them from:
"reactotron-react-native": "1.14.0",
"reactotron-redux": "1.13.0"
to:
"reactotron-react-native": "^3.5.0",
"reactotron-redux": "^3.1.0"