Nativebase: Vertical Webview scroll inside Tabs not working on Android

Created on 9 Apr 2019 · 5Comments · Source: GeekyAnts/NativeBase

I have gone through these following points

[x] Check latest documentation: https://docs.nativebase.io/
[x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
[x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
[x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
[ ] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
[x] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

node: 11.12.0
react-native: 2.0.1
native-base: 2.12.1

Expected behaviour

Smooth vertical scrolling like on iOS

Actual behaviour

Vertical scroll not quite possible due to tabchange on minimal horizontal movement

Steps to reproduce

I'm using a Tabs Layout where each Tab contains a Webview

App.js

...
    render() {
        console.log(this.state.tabLocked);
        let showTabs = this.state.data.tabs.length > 1;
        let tabs = this.state.data.tabs.map((tab, index) => <Tab key={index} heading={tab.title}><MyWebView url={tab.url}/></Tab>);

        return (
            <Container scrollEnabled={false}>
                <MyToolbar title={'lorem'} showTabs={showTabs}/>
                <Content contentContainerStyle={{flex: 1}}>
                    {showTabs ? (
                        <Tabs prerenderingSiblingsNumber={2} renderTabBar={() => <ScrollableTab/>}>
                            {tabs}
                        </Tabs>
                    ) : (
                        <Text>No Tabs</Text>
                    )}
                </Content>
            </Container>
        );
    }
....

WebView.js

...
    render() {
        return (
            <WebView
                ref={(myWeb) => this.refWeb = myWeb}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                mediaPlaybackRequiresUserAction={true}
                startInLoadingState={true}
                style={{height: this.state.height}}
                source={{uri: 'https://facebook.github.io/react-native/'}}
            />
        );
    }
...

On Android there is no "Threshold" for vertical scrolling like on iOS. I tried different WebView configurations, source urls, Scrolllisteners but the problem seems consistant. Setting the parameter locked solves the problem, but I would like to change tabs by scrolling as well.

Is the bug present in both iOS and Android or in any one of them?

Android

Any other additional info which would help us debug the issue quicker.

ezgif com-video-to-gif

bug

Source

philipp65

All 5 comments

yes, I found this issue
Will look into it

SupriyaKalghatgi on 18 Apr 2019

👍1

Is there any update to this issue? My current workaround is locking the Tabs on Android and implementing a GestureListener which does the swiping manually on Android. This is by far not as smooth as on iOS.

philipp65 on 20 May 2019

Up. Im facing this issue also. Is there any solution? >.<