Reactotron: Not working with Expo

[agusnavce]

Hi,

I'm trying to setup reactotron with expo, I had it working with a older version of react native but now I am migrating to expo lastest version and can't make it work.

This is my config.

// reactotronConfig.js

import { reactotronRedux } from "reactotron-redux";
import Reactotron from "reactotron-react-native";

export function configureReactotron() {
  return Reactotron.configure()
    .useReactNative()
    .use(reactotronRedux())
    .connect(); // let's connect!
}

and in App.js

import { configureReactotron } from "./reactotronConfig";
import Reactotron from "reactotron-react-native";
import { applyMiddleware } from "redux";
import ReduxThunk from "redux-thunk";
//...
if (__DEV__) {
  configureReactotron();
  store = Reactotron.createStore(
    (state, action) => state,
    {},
    applyMiddleware(ReduxThunk)
  );
}

and the error is

 _reactotronReactNative.default.createStore is not a function. (In '_reactotronReactNative.default.createStore(function (state, action) {
   return state;
 }, {}, (0, _redux.applyMiddleware)(_reduxThunk.default))', '_reactotronReactNative.default.createStore' is undefined)

"reactotron-react-native": "^3.2.1",
 "reactotron-redux": "^3.1.0"
"expo": "^32.0.0"

[agusnavce]

Well,

After trying a few configurations this worked for me if anyone is having trouble configuring the tool with expo.

// App.js

import { Provider } from "react-redux";
import { applyMiddleware, createStore, compose } from "redux";
import ReduxThunk from "redux-thunk";
import { reactotronRedux } from "reactotron-redux";
import Reactotron from "reactotron-react-native";

let store;

if (__DEV__) {
  const reactotron = Reactotron.configure({ port: 9090 })
    .useReactNative() 
    .use(reactotronRedux())
    .connect();
  store = createStore(
    (state = {}, action) => state,
    compose(
      applyMiddleware(ReduxThunk),
      reactotron.createEnhancer()
    )
  );
} else {
  store = createStore(
    (state = {}, action) => state,
    applyMiddleware(ReduxThunk)
  );
}
....

[enverbisevac]

reactotron.createEnhancer() is not a function

"reactotron-react-native": "^3.2.1",
"reactotron-redux": "^3.1.0",

[rmevans9]

Is that TypeScript telling you that it isn’t a function or at runtime? Can you show the reactotron configuration code you are using?

[enverbisevac]

At runtime, I use same as you:

const reactotron = Reactotron.configure({ port: 9090 })
            .useReactNative() 
            .use(reactotronRedux())
            .connect();
        store = createStore(
            (state = {}, action) => state,
            compose(
            applyMiddleware(...middleware),
            reactotron.createEnhancer()
            )
        );

[rmevans9]

I will see about recreating this issue this weekend

[apperside]

This is my working configuration, hope can help someone

"reactotron-react-native": "^3.2.1",
"reactotron-redux": "^2.1.0",

import { NativeModules } from "react-native";
import Reactotron, {
    asyncStorage,
    networking,
    trackGlobalErrors
} from "reactotron-react-native";
import * as reactotronRedux from "reactotron-redux";
import { applyMiddleware, compose, createStore, Store } from "redux";

// get the host url, needed for when running from device
const scriptURL = NativeModules.SourceCode.scriptURL;
let scriptHostname = scriptURL.split("://")[1].split(":")[0];
let reactotron = Reactotron.configure({ host: scriptHostname }) /
                .use(trackGlobalErrors({}))
                // .use(openInEditor())
                // .use(overlay())
                .use(asyncStorage({}))
                .use(networking())
                //@ts-ignore
                .useReactNative() // add all built-in react native plugins
                .use(reactotronRedux.reactotronRedux()) //  <- here i am!
                .connect(); // let's connect!

            let createStoreFunction = createStore;
            if (__DEV__) {
                createStoreFunction = reactotron.createStore;
            }
            const store = createStoreFunction<AppState>(
                combineReducers,
                {
                    my store initial data
                },
                compose(applyMiddleware(thunk))
            );