Cannot see the inspector

[jp928]

In the first load, the screen always shows a error as below:

After pressing the 'Dismiss' button at the left bottom of the screen, the debugger can be used properly in some extent. However, the inspector show up a connecting forever and I am not able to inspect any component from the screen.

[jhen0409]

Thanks for report! Could you provide a small RN example, let me try to reproduce it?

If you want help to debug, you can just run electron part of react-devtools.

[alvarolorentedev]

@jhen0409 it has been hapening for me also for the last months or so. My react native version is currently 0.40. any ideas or any specific way we can provide data that could be helpful for you?

[alvarolorentedev]

The other information i can provide is thatvi am using react native logger package so i can see on the console all my redux state changes. What this kind of means for me is that the connection in between the debugger and your app works fine. Could my rputer component for example if it has its own store be causing this issue?

what kind of package could cause an uncompatibility?

[jp928]

@jhen0409 Thanks for your reply.
My RN component structure is something like below:

<View style={Styles.container}>
    <Animated.View style={[Styles.headerWrapper, { height }]}>
          <Animated.Image
            source={require('./img/background.png')}
            style={[Styles.backgroundImage, { height }]}
          >
            {this.renderFullHeader()}
            {this.renderstrippedHeader()}
          </Animated.Image>
    </Animated.View>
    <ScrollView
          ref={(ref) => { this.scrollView = ref; }}
          showsVerticalScrollIndicator
          horizontal={false}
          onScroll={e => this.handleScroll(e)}
          onScrollEndDrag={e => this.onScrollEnd(e)}
          scrollEventThrottle={50}
        >
          <Animated.View style={transform}>
            <Text style={{ height: 80, backgroundColor: 'green' }}>First View Goes Here.</Text>
            <Text style={{ height: 600, backgroundColor: 'yellow' }}>Second View Goes Here.</Text>
            <Text style={{ height: 600, backgroundColor: 'red' }}>Third View Goes Here.</Text>
          </Animated.View>
    </ScrollView>
</View>

I suspect it is caused by the scrollview or animated view because it works properly when I debugging with other apps.

[jp928]

@jhen0409 BTW. The link for electron part of react-devtools is not accessible.

[jhen0409]

My RN component structure is something like below:

I can't reproduce the problem with the code (RN v0.39 ~ v0.41), would be better if you can make small project as a GitHub repo for reproduce the problem. @jp928 @kanekotic

BTW. The link for electron part of react-devtools is not accessible.

Sorry I wrote a wrong link 😅, it should be here. If you can reproduce this problem with the package, lets move this issue to react-devtools.

[jhen0409]

It seems fixed in react-devtools, RNDebugger should used older commit, sorry about that I'll release new version. 😅

[jhen0409]

v0.5.6 is released! @jp928 @kanekotic let me know if it still not work.