initialLayout behaves differently with and without js remote dedbug

[zhukovka]

If state.index is set to a number other than 0, and an initial layout is set - TabViewAnimated works well with NO js remote debug, breaks with js remote debug on.

Expected behaviour

the active tab is set to 1 and I can switch tabs both with and without remote js debugging

Actual behaviour

the active tab is set to 1 and I can't switch tabs with remote js debug on - nothing happens when I'm trying to switch to another tab;

Code sample, screenshots

class MissionComponent extends Component<MissionProps, IMissionState> {

    constructor (props) {
        super(props);

        this.state = {
            index : 1,
            routes : [
                {key : "map", title : "map"},
                {key : "streams", title : "streams"}
            ]
        }
    };
  
 _handleChangeTab = index => this.setState({index});
  render () {
        return (
            <View style={{flex : 1}}>
                <TabViewAnimated
                    renderScene={this._renderTab}
                    navigationState={this.state}
                    onRequestChangeTab={this._handleChangeTab}
                    changeRoute={this._handleChangeTab}
                    renderHeader={this._renderHeader}
                    initialLayout={{
                        height : 0,
                        width : Dimensions.get('window').width,
                    }}
                />
            </View>
        );
    }
}

What have you tried

[satya164]

Looks similar to this facebook/react-native#13463

[zhukovka]

@satya164 doesn't seem to be related

[satya164]

You're sure? Are you able to swipe to change tabs?

[zhukovka]

@satya164 I am able when "Debug JS remotely" is off, it seems to be somehow related with "Debug JS remotely". When "Debug JS remotely" is on I am not able neither click nor swipe to change a tab.
However, if I remove initialLayout it works with "Debug JS remotely", but doesn't work properly without "Debug JS remotely".

[satya164]

@zhukovka I understand that it only happens when you are connected to the debugger. But the behaviour you are describing looks very similar to the issue I linked to, despite the different steps to repro. Or you are saying the behaviour is different from that issue?

Also since the issue I linked to is related to layout, it's probable that some different behaviour in chrome debugger somehow triggers this issue.

[andreecosta]

I have a similar problem..

When Remote Debug is ON, my layout is correct:
https://imgur.com/a/5YWyE

When Remote Debug is OFF, my layouts gets weird:
https://imgur.com/a/YWDEu

[zhukovka]

What I have found is in TabViewPagerScroll.js

 _handleScroll = (e: ScrollEvent) => {
    this._isIdle =
      Math.abs(e.nativeEvent.contentOffset.x - this._nextOffset) < 0.1;
    this.props.position.setValue(
      e.nativeEvent.contentOffset.x / this.props.layout.width
    );
  };

in debug mode e.nativeEvent.contentOffset.x is 0 for the first time, but _isIdle is set to false, so everething breaks.
While in non-debugging mode e.nativeEvent.contentOffset.x is actual offset value from the very beginning
this is the reason I have my problem

[taiki-t]

This problem is maybe of react native itself: facebook/react-native#15808
Other components that use ListView are also having similar problems.

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.