Nativebase: Horizontal ScrollView inside Tab component doesn't work

[xempie]

I'm using NativeBase scrollable Tabs and each tab contains a horizontall ScrollView on top and some other contents under the ScrollView. The issue is when I try to scroll the contents inside ScrollView, it does not move and instead, the page (or Tab) scrolls to the other page or tab.

I want to keep locked={false} to slide between tabs. If I set locked = {true} the scrollview works but not the page content sliding.

Anyone knows how to fix this?

react-native : 0.49.3
native-base : 2.3.3

Expected behaviour

ScrollView scrolls horizontally

Actual behaviour

Scrolls to the next tabbed page

Steps to reproduce (code snippet or screenshot)

This is my code

render() {
        return (
            <Tabs renderTabBar={()=> <ScrollableTab />} style={tabsStyles.tab} initialPage={2}
                  onChangeTab={page => this.tabChanged(page)}
                  locked={false}>
                 <Tab heading="Tab One">
                       <ScrollView
                          horizontal
                          showsHorizontalScrollIndicator={false}
                        >
                      <Image source={...}> // There are several images here
                  </ScrollView>
                      <PageContent> // This could be any page content
                  </Tab>
                 <Tab heading="Tab Two">
                       <ScrollView
                          horizontal
                          showsHorizontalScrollIndicator={false}
                        >
                      <Image source={...}> // There are several images here
                     </ScrollView>
                      <PageContent> // This could be any page content
                  </Tab>
                  <Tab heading="Tab Three">
                       <ScrollView
                          horizontal
                          showsHorizontalScrollIndicator={false}
                        >
                      <Image source={...}> // There are several images here
                     </ScrollView>
                      <PageContent> // This could be any page content
                  </Tab>
           <Tabs>
        );
    }

I tested on Android, not sure about iOs

[SupriyaKalghatgi]

Currently this is a limitation. When using Horizontal ScrollView with tabs, you have to lock the tabs for Horizontal ScrollView to work correctly. On wrapping the Horizontal ScrollView inside the tab, for horizontal scroll - the parent scroll action dominates the child scroll action which causes only Tab to scroll

[shivamarora123]

Any Update on this Limitation? i Want to Use the Tabs with the horizontal scroll view inside one Tab.. or Is there any other alternative ?

[shivamarora123]

I'm using NativeBase scrollable Tabs and each tab contains a horizontall ScrollView on top and some other contents under the ScrollView. The issue is when I try to scroll the contents inside ScrollView, it does not move and instead, the page (or Tab) scrolls to the other page or tab.

I want to keep locked={false} to slide between tabs. If I set locked = {true} the scrollview works but not the page content sliding.

Anyone knows how to fix this?

react-native : 0.49.3
native-base : 2.3.3

Expected behaviour

ScrollView scrolls horizontally

Actual behaviour

Scrolls to the next tabbed page

Steps to reproduce (code snippet or screenshot)

This is my code

render() {
        return (
            <Tabs renderTabBar={()=> <ScrollableTab />} style={tabsStyles.tab} initialPage={2}
                  onChangeTab={page => this.tabChanged(page)}
                  locked={false}>
                 <Tab heading="Tab One">
                       <ScrollView
                          horizontal
                          showsHorizontalScrollIndicator={false}
                        >
                      <Image source={...}> // There are several images here
                  </ScrollView>
                      <PageContent> // This could be any page content
                  </Tab>
                 <Tab heading="Tab Two">
                       <ScrollView
                          horizontal
                          showsHorizontalScrollIndicator={false}
                        >
                      <Image source={...}> // There are several images here
                     </ScrollView>
                      <PageContent> // This could be any page content
                  </Tab>
                  <Tab heading="Tab Three">
                       <ScrollView
                          horizontal
                          showsHorizontalScrollIndicator={false}
                        >
                      <Image source={...}> // There are several images here
                     </ScrollView>
                      <PageContent> // This could be any page content
                  </Tab>
           <Tabs>
        );
    }

I tested on Android, not sure about iOs

its Working for IOS but it's not working for Android

[german970814]

@SupriyaKalghatgi It does not work for me, I setted locked={true} and still not working, any suggestion?

[ranpaco]

setting locked={true} for Tabs components it worked for me. but still it is a bug very annoying.

[anurag060]

any solution other than setting locked={true}

[dyegooviedo]

Hi there! Please can someone help us to use ScrollView with Tab component on android too?

[wanghe826]

same problem in android, but work in iOS.