Reactotron: Not seeing <Image> network requests

[peacechen]

I'm trying to log network requests made by the Image component with source uri set to a remote host. Reactotron isn't showing any network requests, only apisauce calls and redux actions.

Here are the versions the app is using:

"apisauce": "^0.14.1",
"axios": "^0.16.2",
"react-native": "0.49.3",
"reactotron-apisauce": "^1.12.2",
"reactotron-react-native": "^1.12.3",
"reactotron-redux": "^1.12.2",

Reactotron OSX binary version is 1.15.0.
I've also tried it with react-native 0.45 in another app.

Reactotron config is

import Reactotron, {trackGlobalErrors, networking} from 'reactotron-react-native';
import apisaucePlugin from 'reactotron-apisauce';

Reactotron
    .configure({name: 'OnceConnect'})
    .use(trackGlobalErrors())
    .use(apisaucePlugin())
    .use(networking())
    .connect();

I'm using some boilerplate that calls createReactotronEnhancer when creating the Redux store. There is also a call to addMonitor(Reactotron.apisauce) when instantiating apisauce.

Is that config correct? Anything else I should set up?

[skellock]

Try upgrading your reactotron-* dependencies.

You can remove reactotron-apisauce entirely now. (as well as that monitor).

Instead of those 3 use calls, try this: Reactotron.useReactNative()

[peacechen]

Updated to the latest versions
"reactotron-react-native": "^1.14.0",
"reactotron-redux": "^1.13.0",

... removed reactotron-apisauce and associated addMonitor() call.

No change in behavior up to that point. I then replaced the .use() calls with .useReactNative() and still no network logging. It is now logging Async Storage which it wasn't before, so something changed.

Maybe the Image component uses a different network request mechanism?

Edit: A fetch call logs as API RESPONSE
fetch('https://facebook.github.io/react-native/movies.json')

[skellock]

Ya, perhaps they have a different mechanism within React Native for loading network images.

[rmevans9]

https://github.com/facebook/react-native/blob/8f9b291224d1ca57a5f90200ec4687abb4706f4b/Libraries/Image/RCTImageLoader.m#L578

For the <Image /> tag it is loaded on the native side. This means it doesn't ever touch the XHRInterceptor that is used to grab the rest of the requests.

[MaxiSantos]

@skellock those steps you provided are documented for a new way to setup apiSauce with reactotron ?

[skellock]

If you're using a newer react-native (44+ i believe) and a newer reactotron-react-native, you can simply stop using reactotron-apisauce and you'll get network monitoring for free by using .useReactNative() took hookup the middleware.

I hope I've documented that. Maybe the quick start? If I'm wrong, or it's unclear, I wouldn't mind a PR to help clarify it!

[rmevans9]

.useReactNative() is documented here: https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md#configure-reactotron-with-your-project
networking (which is what `useReactNative uses under the hood) is documented here: https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md