ptomasroos
Can't scroll content of ScrollableTabView with ScrollView
- [x] I have searched existing issues
- [x] I am using the latest scrollable tab view version
Pages doesnt scroll down. When there is only one tab, its scrolls down, but when i ad second tab, its not scrollable anymore.
Steps to Reproduce
First of all i tried to o it with Page component exited in the example project and it didnt change anything. so i changed Pages with <Text>. This is the inside of my ScrollableTabView
<ScrollableTabView
renderTabBar={() => (
<TabBar
underlineColor="#027EB3"
tabBarStyle={{ backgroundColor: "#CFF3FF", borderTopColor: '#d2d2d2', borderTopWidth: 1 }}
renderTab={(tab, page, isTabActive, onPressHandler, onTabLayout) => (
<Tab
key={page}
tab={tab}
page={page}
isTabActive={isTabActive}
onPressHandler={onPressHandler}
onTabLayout={onTabLayout}
styles={this.interpolators[page]}
/>
)}
/>
)}
>
<ScrollView style={{ flex: 1 }} tabLabel={{ label: "PORTRAIT" }}>
<View style={styles.container} >
<Text style={styles.textStyle}> {`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. \n Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis`} </Text>
</View>
</ScrollView>
<ScrollView style={{ flex: 1 }} tabLabel={{ label: "MYCITY" }}>
<View style={styles.container} >
<Text style={styles.textStyle}> {`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. \n Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis`} </Text>
</View>
</ScrollView>
</ScrollableTabView>
{. . .}
Expected Behavior
I was expecting i will be able to scroll down in the pages of the tabs.
Actual Behavior
Basicy nothing happens. I can scroll horizontal to next Tab but i cant scroll down in the content. When i give border i can see borders go down correctly but content not scrollable. here we can see the borders and placeholder content: https://imgur.com/a/bH3gVYw
and the stackoverflow link: https://stackoverflow.com/questions/64118742/cant-scroll-content-of-scrollabletabview-with-scrollview
