No connection reactotron / react-native - react-native

I try to debug an application with Reactotron in a (IOS) React Native project but there is "No Activity" when I run my application.
I work with react-native 0.55.4, reactotron 2.1.0 (same in my package.json)
TimeLine Reactotron
My reactotronConfig.js
index.js file where reactotron is imported
reactotron in my package.json

You have to do the following:
enter on CLI: adb reverse tcp:9090 tcp:9090
add this to a file (e.g lib/Reactotron.js):
import Reactotron, { asyncStorage } from 'reactotron-react-native';
Reactotron
.configure() // controls connection & communication settings
.useReactNative(asyncStorage()) // add all built-in react native plugins
.connect();
import the File in your app.js:
if (__DEV__) {
import('../../lib/Reactotron').then(() => console.log('Reactotron Configured'));
}
Note: If you wan't to use host Prorperty inside of configure(), be sure to use 127.0.0.1. In my case other IP (even if local like 192.x.x.x) doesn't work.
After that, you connection should work, and you can use Reactotron like described in the Docs.
HINT:
For Linux & Mac, you can add this to package.json (script-section) (adjust the path & call of your reactotron-app to your needs):
"scripts": {
...
"reactotron": "adb reverse tcp:9090 tcp:9090 && /opt/Reactotron/reactotron-app",
...
}

I did this adb reverse tcp:9090 tcp:9090 that I got from Suther and yarn start --reset-cache and it worked.

First of, you are not assigning the configured Reactotron object to your console.tron value. You need to do something like this:
console.tron = Reactotron.configure({ ...
Looking at your reactotronConfig.js file I notice that you are sending it to localhost. This will only work when running on the simulator (not sure if that is what you are doing).
If you want to run it on a device, you will need to give it your packager's ip address. A neat way of doing that is to use the following code:
import { NativeModules } from 'react-native';
let packagerHostname = "localhost";
if (__DEV__) {
const scriptURL = NativeModules.SourceCode.scriptURL;
packagerHostname = scriptURL.split("://")[1].split(":")[0];
}
const reactotron = Reactotron.configure({
name: "myAPPILOC",
host: packagerHostname
});
console.tron = Reactotron;

Please enable debug mode ( Press ⌘+D on iOS simulator, ⌘+M on Android emulator, or shake real devices). Then kill app and restart app.
I hope it's help

What I can recommend and what has worked for me is to install these version packages:
"reactotron-react-native": "3.5.0",
"reactotron-redux": "3.1.0",
Then you will need to configure your store accordingly:
import {createStore, applyMiddleware, compose, combineReducers} from 'redux';
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));
const store = createStore(appReducer, composeEnhancers(middleware, Reactotron.createEnhancer()));
Now of course, the above is my setup but you will need to tweak yours accordingly, the main point being follow the Configuration as documented here:
https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md

Related

React Native Storybooks Component not Loading

I'm trying to load the default stories that come when you first install Storybook. Had some issues getting the server to start but I managed to fix it by adding port and host in the config. But even after getting it to run, clicking on any of the components doesn't update.
I'm expecting to see a Button.
And ideas? Here's the storybook index.js. I'm using Expo.
// if you use expo remove this line
// import { AppRegistry } from "react-native";
import {
getStorybookUI,
configure,
addDecorator,
} from "#storybook/react-native";
// import { withKnobs } from '#storybook/addon-knobs';
import "./rn-addons";
// enables knobs for all stories
// addDecorator(withKnobs);
// import stories
configure(() => {
require("./stories");
}, module);
const StorybookUIRoot = getStorybookUI({
host: "192.168.100.6", // replace this ip address with your local ip address
port: "7007",
asyncStorage: null,
});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
// AppRegistry.registerComponent("%APP_NAME%", () => StorybookUIRoot);
export default StorybookUIRoot;
Also not sure if this is related but I've had to comment out addon-knobs in addons.js because it can't find it even though I have addon-knobs in my package.json:
import '#storybook/addon-actions/manager';
import '#storybook/addon-links/manager';
// import '#storybook/addon-knobs/manager';
I've tried replacing it with
register
like I've read on here but it still didn't work.
import '#storybook/addon-knobs/register';

react native socket io does not work on production mode

i have a react native app that i'm trying to have a chat functionality with , which worked just great and just as i expected until i was ready to post for production . the whole code works perfectly with expo start and development mode but when i run the app with production mode sockets do not work at all. or they work partially.
i have two apps and in one it recieves but don't send messages and the other one doesn't do anything at all(one is android and the other is ios).
i'm connecting to my socket io using the following:
in App.js...
import { SocketContext , socket } from "./context/socket";
return (
<SocketContext.Provider value={socket}>
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar />
<Toast ref={(ref) => Toast.setRef(ref)} />
</SafeAreaProvider>
</SocketContext.Provider>
);
in my socket.js file i have:
import OpenSocket from "socket.io-client";
import { API_URL } from "../constants/API";
import React from 'react';
import useRoom from "../tools/useRoom";
import useSession from "../tools/useSession" ;
import useUser from "../tools/useUser" ;
// import AsyncStorage from "#react-native-async-storage/async-storage";
// import { AsyncStorage } from "react-native";
export const userIDStorage = 'user-id'
// const {userID , sessionID } = await getUserID();
export const socket = OpenSocket.connect(API_URL);
socket.on('connect',()=>{
console.log('user connected...');
// TODO ==> check if there is a local room saved and if it is active...
});
export const SocketContext = React.createContext();
and in my chat page i have the following to call and emit from the socket ::
import { SocketContext } from "../../context/socket";
const socket = useContext(SocketContext);
in the rest of the page i just call
socket.emit('something',{data});
as such...
anyways there is no output to actually get in expo production mode apps but i was able to deduce that when the app is in production mode sockets aren't firing by testing every line of the code alone on different events... and when i'm in development mode everything works as it should.
Note :
for the server side i'm using a heroku hosted express but i didn't add anything about it here cuz i tested the apps on development mode with the production server and they work fine it's just when they are in producion mode they don't work anymore.

use redux-devtools-extension with react-native with chrome

Need help in setup Redux devTools for react-native
I have very simple reducer and createStore here, and I try to incorporate redux-devtools-extension, so I can debug my react-native
app, but I got "store no found" in Redux tab
import { createStore, applyMiddleware} from 'redux'
import {reducer} from "./reducers"
import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-
extension'
let store = createStore(reducer, devToolsEnhancer());
export const reducer = (state=[], action) => {
switch(action.type) {
case "ADD_MEMBER":
return [...state, {categoryID: 0, name: "Bill", zip: "27733", id: 4}]
default:
return state
}
return state;
}
Redux DevTools Extension cannot access the React Native worker, as extensions cannot inject code into web workers. You have to use remote-redux-devtools to communicate with the extension via websockets.
You'll have just to replace
import { devToolsEnhancer } from 'redux-devtools-extension'
with
import devToolsEnhancer from 'remote-redux-devtools';
Then from the extension context menu, click on "Open Remote DevTools". By default it'll use its remote server for quick bootstrapping, but it's recommended to run your local server by installing and running remotedev-server. It's similar to how you have to install and run react-devtools package for React Native.
Another option is to use React Native Debugger.
The win is, you don't have to npm install redux devtools every time. The debugger provides you the good old "REDUX_DEVTOOLS_EXTENSION" out of the box.
So, if you are reusing code from web, you do not need any code changes. The same set up as redux devtools extension will just work.
For a thorough guide on how to setup React Native Debugger with an Expo app look here. (As the official docs are a bit confusing.)

remote redux devtools stopped working

This question has been asked before but I cannot find a working solution so I'm taking the liberty to show my code in case I am missing something. I have a react native app and using redux. I have been using remote-redux-devtools for two months on this project now, but the tool stopped working all of a sudden. I receive a "SocketProtocolError" in the console and will paste that below as well as my code.
Redux store
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "remote-redux-devtools";
import thunk from "redux-thunk";
import reducers from "../../State/reducers/index";
const composeEnhancers = composeWithDevTools({ realtime: true });
const store = createStore(
reducers,
{},
composeEnhancers(applyMiddleware(thunk))
);
export default store;
In my package.json file I am using "remote-redux-devtools": "^0.5.13"
This is the error I get in the console.
Any help would be greatly appreciated!
I fixed the same error when debugging an app on my phone by running:
adb reverse tcp:5678 tcp:5678
to allow the phone to connect to the devtools. Adjust the port number if using a different one. If you're running the app in an emulator on your computer, this probably won't help.

How to set up reactotron-apisauce in react native?

I'm new to react native and reactotron.
I want to monitor axios HTTP request, but I can't.
In my idea, networking = XMLHttpRequests, apisauce = axios.
below is my code.
// Reactotron.config
import Reactotron, { networking } from 'reactotron-react-native'
import apisaucePlugin from 'reactotron-apisauce'
Reactotron
.configure()
.useReactNative(networking())
.useReactNative(apisaucePlugin())
.connect()
//App.js
import './config/ReactotronConfig';
import Reactotron from 'reactotron-react-js'
// I tried import Reactotron from 'reactotron-react-native'
api.addMonitor(Reactotron.apisauce)
What is wrong?
If monitoring axios requests is the only purpose you want to solve.
I suggest you make your requests global.
Add this line in your index.js file.
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
Now, on your emulator, enable Debug JS Remotely, there you can see all your network requests from the network tab.