ptomasroos / react-native-scrollable-tab-view

Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar
https://www.npmjs.com/package/react-native-scrollable-tab-view
6.93k stars 2.28k forks source link

Can't scroll content of ScrollableTabView with ScrollView #1119

Open ghost opened 3 years ago

ghost commented 3 years ago

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 . 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

zyslife commented 3 years ago

You can try the react-native-head-tab-view. (tabs with collapsible header)

wublack commented 3 years ago

The view compatible with IOS and Android react-native-scrollable-tabview

fukemy commented 2 years ago

lol i found set locked={true} now i can swipe, mf