Problem Tabs does not fix and scroll infinite in the tab

[Angelk90]

@GeekyAnts, @akhil-geekyants: Link Video: https://drive.google.com/file/d/1ifx1orms0PHYb3LLhf5lcwrVFyjPVk1j/view

Hi, I'm using tab. As you can see from the video, native base in this case behaves very strangely, as if it were broken.

First problem: The tabs are not fixed under the toolbar, as they normally should.

Second problem: I am in the first "TAB1" (Info), I scroll, no problem except for the fact that the "TABS" should be fixed. I click on the "TAB2" (Movie), the elements are rendered. I do not even need to scroll the elements, if I click on the "TAB1" (Info) already, it will take the same height as the "TAB2" (Movie), that is the maximum height rendered.

Instead, as usual, each TAB should have its own height.

react-native, react and native-base version

"native-base": "^2.3.3", "react": "16.1.1", "react-native": "0.50.4"

Expected behaviour

• Tabs that is fixed under the toolbar.
• Tabs that have the right height size for their content.

Actual behaviour

• Tabs not fixed under the toolbar.
• Tabs that take the maximum size of the "rendered" tab.

Steps to reproduce (code snippet or screenshot)

Link expo to try it: https://snack.expo.io/HJrZ9jXEf

Code:

import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  Dimensions,
  ListView,
  PixelRatio,
  StyleSheet
} from 'react-native'
var {width} = Dimensions.get('window');
import CollapsingToolbar from './lib/index';
import { Container, Tabs, Tab as Tabn } from "native-base";
 // 2.3.6
import "@expo/vector-icons";
 // 6.2.2

const Description = "Amy Lou Adams was born in Vicenza, Veneto, Italy, to American parents Kathryn (Hicken) and Richard Kent Adams, while her father was a U.S. serviceman. She was raised in a Mormon family of seven children in Castle Rock, Colorado, and has English, as well as smaller amounts of Danish, Swiss-German, and Norwegian, ancestry.";

const Movie = [{
  id: 640,
  poster_path: "/MywWCQGJNUr5kivAQ7eseCG7rm.jpg",
  title: "Catch Me If You Can"
},{
  id: 1444,
  poster_path: "/asC6UOPrR6OlNMiyXbeXWu08SOG.jpg",
  title: "Junebug"
},{
  id: 10490,
  poster_path: "/lWCooTiA6sSLdCA4hzToHKKWBZb.jpg",
  title: "Drop Dead Gorgeous"
},{
  id: 4523,
  poster_path: "/8KCNzCArLlvLdQoHx6npua2VSVc.jpg",
  title: "Enchanted"
},{
  id: 5458,
  poster_path: "/cehmfvz2fJtBa1M6a3saRRsj5CD.jpg",
  title: "Cruel Intentions 2"
},{
  id: 21801,
  poster_path: "/l39vqAh57UjA0c5vBJUUPyuqz32.jpg",
  title: "The Slaughter Rule"
},{
  id: 6538,
  poster_path: "/uN9tN0ZDyol7VsTlugDZhGc11xQ.jpg",
  title: "Charlie Wilson's War"
},{
  id: 24803,
  poster_path: "/4BFGuCcdV7y8mFYzBhgj00d3b1z.jpg",
  title: "Julie & Julia"
},{
  id: 25195,
  poster_path: "/9UWKpkQvZaPqpb85Or4e0PghJft.jpg",
  title: "Leap Year"
},{
  id: 12178,
  poster_path: "/8upvDaxMou1RGU0EqbQYjAxri4p.jpg",
  title: "Miss Pettigrew Lives for a Day"
},{
  id: 12771,
  poster_path: "/cgLqjuKp5AT1o9xvWhriToS2mHr.jpg",
  title: "Serving Sara"
},{
  id: 9718,
  poster_path: "/hi8whfL7t6cL2LITLJjzJ7UWuZA.jpg",
  title: "Talladega Nights: The Ballad of Ricky Bobby"
},{
  id: 13090,
  poster_path: "/9JkxUbOFiomw2Ci8ayTfAT69s0k.jpg",
  title: "Sunshine Cleaning"
},{
  id: 6961,
  poster_path: "/A2m90ko1FCnJqEkpbHwMq3BDgx6.jpg",
  title: "The Wedding Date"
},{
  id: 9971,
  poster_path: "/8oY0tWU2HlYhOLki1QvsaU0BdPU.jpg",
  title: "The Last Run"
},{
  id: 27723,
  poster_path: "/25a4lSkU43K2npb4g1XOJqmgtNb.jpg",
  title: "Psycho Beach Party"
},{
  id: 28025,
  poster_path: "/7ZAJS9ILCeh7dF61UPdlV8M8fap.jpg",
  title: "Moonlight Serenade"
},{
  id: 14167,
  poster_path: "/r5a8l1fz6WjLvOmELY0tTfoCXTf.jpg",
  title: "Standing Still"
},{
  id: 14359,
  poster_path: "/eoxF1LlYvJeVJcEmptfV8PLtpBK.jpg",
  title: "Doubt"
},{
  id: 45317,
  poster_path: "/ytGIpdxYyvXwch5QILfquSTMA9f.jpg",
  title: "The Fighter"
},{
  id: 64328,
  poster_path: "/Ai7JRZFEXXOX7rhgfeL861zZtWv.jpg",
  title: "The Muppets"
},{
  id: 18360,
  poster_path: "/qbU6AxmO69bBwu6Tw8HtcRoltAA.jpg",
  title: "Night at the Museum: Battle of the Smithsonian"
},{
  id: 48798,
  poster_path: "/it22C6LNuwd4ktP8oDJECdJxxS3.jpg",
  title: "Love and Distrust"
},{
  id: 49521,
  poster_path: "/xWlaTLnD8NJMTT9PGOD9z5re1SL.jpg",
  title: "Man of Steel"
},{
  id: 68722,
  poster_path: "/rUSjbyvYWN9H4az8xt0tDtU7I6v.jpg",
  title: "The Master"
},{
  id: 83770,
  poster_path: "/uORuwLgdDFkA4BuU9b9nuhTkuy.jpg",
  title: "On the Road"
},{
  id: 87093,
  poster_path: "/tkxE7BLschoqNzTikrGvZN7IL7K.jpg",
  title: "Big Eyes"
},{
  id: 87825,
  poster_path: "/vNWFhlTseaTupYmpnXxJLoShJe3.jpg",
  title: "Trouble with the Curve"
},{
  id: 121555,
  poster_path: "/zRh6R3fBT6cVWGG5PvTnVmmwAEn.jpg",
  title: "Stephen Tobolowsky's Birthday Party"
},{
  id: 152601,
  poster_path: "/fsoTLnUXEUTNuVCBxAJMY0HPPd.jpg",
  title: "Her"
},{
  id: 168672,
  poster_path: "/mhB7C62lSMpGO2HYNaW6d7W3TVH.jpg",
  title: "American Hustle"
},{
  id: 209112,
  poster_path: "/cGOPbv9wA5gEejkUN892JrveARt.jpg",
  title: "Batman v Superman: Dawn of Justice"
},{
  id: 219611,
  poster_path: "/mGVmFhYkmJqqad3e4qvFypLlTBK.jpg",
  title: "Back Beyond"
},{
  id: 141052,
  poster_path: "/9rtrRGeRnL0JKtu9IMBWsmlmmZz.jpg",
  title: "Justice League"
},{
  id: 261768,
  poster_path: "/qBnNHTLc6GIgEWOtKA0Q3HuGmfE.jpg",
  title: "Lullaby"
},{
  id: 329865,
  poster_path: "/hLudzvGfpi6JlwUnsNhXwKKg4j.jpg",
  title: "Arrival"
},{
  id: 378674,
  poster_path: "/xfEZBeUwZGdUQXZ7m8e353r8MqX.jpg",
  title: "DC Films Presents Dawn of the Justice League"
},{
  id: 447687,
  poster_path: "/yLlmNeZViC68yXztrMzgbJFO9yA.jpg",
  title: "Secret Ingredients: Creating Julie & Julia"
},{
  id: 340666,
  poster_path: "/9Moizj8qxcZK6DqEE1MTO3pQAEw.jpg",
  title: "Nocturnal Animals"
},{
  id: 2179,
  poster_path: "/gQThU8AftVJEBug4ToHUbQ3Lg7M.jpg",
  title: "Tenacious D in The Pick of Destiny"
},{
  id: 9719,
  poster_path: "/jI7tL4uvgUPu6BkyZJ3591rbz44.jpg",
  title: "Pumpkin"
},{
  id: 13171,
  poster_path: "/shqcS4NosGPBZhWETEufJhP4bCO.jpg",
  title: "The Ex"
},{
  id: 414031,
  poster_path: "/z9h3gCVrNvdVfbXZ1eWRq9efFlm.jpg",
  title: "The Chromium Hook"
},{
  id: 416648,
  poster_path: "/gw8CIsFJST4dBkHsuBbToSvGczE.jpg",
  title: "Man of Steel 2"
},{
  id: 6589,
  poster_path: "/aczrdq26BPu7GDIhEVrzRgwsjpl.jpg",
  title: "Underdog"
},{
  id: 338958,
  poster_path: null,
  title: "Disenchanted"
},{
  id: 429197,
  poster_path: null,
  title: "Backseat"
}];

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
export default class Sced extends Component {
    constructor() {
      super();
      this.state = {
        info: Description,
        dataSourceMovie: ds.cloneWithRows(Movie),
      };
    }

  renderRow(r){
    return (
        <View style={{ width: Math.round(width * PixelRatio.get())/15, elevation: 2, borderRadius: 4, overflow: 'hidden', backgroundColor: "#fff", marginTop: 5, marginLeft: 8 }}>
          <Image style={{ borderTopLeftRadius: 4, borderTopRightRadius: 4, height: (Math.round(width * PixelRatio.get())/8), width: Math.round(width * PixelRatio.get())/15}}  source={{uri: (r.poster_path == null) ? 'https://techreport.com/forums/styles/canvas/theme/images/no_avatar.jpg' : 'https://image.tmdb.org/t/p/w185/'+r.poster_path}} />
          <View style={{ flexDirection: 'column', paddingTop: 4, paddingHorizontal: 8 }}>
          <Text style={{ textAlign: 'center', fontSize: 10 }}>{r.title}</Text>
          </View>
        </View>
    );
  }

  render() {
    return (
      <Container>
        <CollapsingToolbar
        toolbarColor='#2196f3'
        title='Amy Adams'
        src={{uri:"https://image.tmdb.org/t/p/original/5lYjMXl7xhG4gUu1XYqh6Dsni2K.jpg"}}>
                  <Tabs initialPage={0} tabBarUnderlineStyle={{
            height: 2,
            backgroundColor: "#FFC107"
          }}>
          <Tabn heading={"Info"}  tabStyle={{ backgroundColor: "#205cb2" }} activeTabStyle={{ backgroundColor: "#205cb2" }}textStyle={{
          fontSize: 12,
          fontWeight: 'bold'
          }}
          activeTextStyle={{
            fontSize: 12
          }}>
          <Text>{this.state.info}</Text>
          </Tabn>
          <Tabn heading={"Movie("+this.state.dataSourceMovie._dataBlob.s1.length+")"} tabStyle={{ backgroundColor: "#205cb2" }} activeTabStyle={{ backgroundColor: "#205cb2" }}textStyle={{
          fontSize: 12,
          fontWeight: 'bold'
          }}
          activeTextStyle={{
            fontSize: 12
          }}>
          <ListView horizontal={false} initialListSize={this.state.dataSourceMovie._dataBlob.s1.length} contentContainerStyle={styles.list} dataSource={this.state.dataSourceMovie} renderRow={this.renderRow.bind(this)} enableEmptySections={true}  />
          </Tabn>
          </Tabs>
        </CollapsingToolbar>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  list:{
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'space-between',
  marginRight: 8,  paddingBottom:65,
},
})

Screenshot of emulator/device

Link Video: https://drive.google.com/file/d/1ifx1orms0PHYb3LLhf5lcwrVFyjPVk1j/view

Is the bug present in both ios and android or in any one of them?

Yes, the problem is present on both.

[tunshiyu]

i solved by this,i think one content is for one part.so when i use Content for the two parts,they have the same height.

<SafeAreaView style={{ flex: 1 }}>
        <Container>
          {/* <Content> */}
          <Tabs>
            <Tab heading="回复详情">
              <Content>{checkRecordList.map(this.renderRecord)}</Content>
            </Tab>
            <Tab heading="传阅详情">
              <Content>{checkRepostList.map(this.renderRepost)}</Content>
            </Tab>
          </Tabs>
          {/* </Content> */}
          <StickyFooterBtn
            onPress={() => this.props.navigation.navigate('VerifyResponse', { documentCheckId })}
            text="回复"
          />
        </Container>
      </SafeAreaView>

[Angelk90]

@tunshiyu:

Could you give an example by posting it on snack.expo.io?

[legowtham]

Did someone find a workaround?

[Cookizza]

The workaround it to always have scrollview as the outer most element within a tabpane, with height of 100% for the scrollview.

If you need tabs or something at the bottom of the screen fixed, include it outside of the scrollview / tabview and add a bottom padding to the tabStyle equal to the fixed bottom items height

[ishdemon]

@Cookizza Can you post some code snippet for your workaround?

[bharatpatil]

I was able to fix this issue with the following snippet

<Container>
  <Tabs>
    <Tab header="Tab1">
      <Content>{/* You tab contents */}</Content>
    </Tab>
    <Tab header="Tab2">
      <Content>{/* You tab contents */}</Content>
    </Tab>
  </Tabs>
</Container>

This solved 2 issues for me:

1. Tallest tab height taken for all tabs.
2. Tab headers remained sticky even if the body has a scroll.

[hanykumar]

Hi @Angelk90, this code snippet is the format of using Tabs.

<Container>
        <Header hasTabs />

        <Tabs>
          <Tab heading="Tab1">
            <Content>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
                <Text>Hii</Text>
              </Content>
          </Tab>
          <Tab heading="Tab2"></Tab>
          <Tab heading="Tab3"></Tab>
        </Tabs>
      </Container>

[hanykumar]

Hi, i hope it has been fixed. Please update to latest Native-Base v2.13.14 . Please let us know if the issue still persists. Closing for now.

[Angelk90]

@hanykumar : The problem persists was not solved at all. Here is an example with updated versions, please reopen the issues, problem not solved. Link: https://snack.expo.io/3TIg!455J

[Salman98]

i solved it by this way

<Container>
    <View> 
        <Tab heading="hasLessData >
            <Screen1 />
        </Tab>
        <Tab> heading="hasMoreData">
            <ScrollView>
                <Screen2 />
            </ScrollView>
        </Tab>
    </View>
</Container>

[grimsammie]

I'm having the same issue. My tabs are like are situated about 30% from the page-top, and when I scroll the tabs disappear.

[Muralidevan]

Tallest tab height taken for all tabs.

why isn't this issue hasn't been fixed yet :( since my data is dynamic i couldn't find out the best solution mentioned above can anyone help me out

    <Tabs
      locked
      onChangeTab={onChangeTab}
      initialPage={initialPage}
      tabContainerStyle={styles.tabContainer}
      tabBarUnderlineStyle={styles.tabsUnderline}
    >
      {content.map(arr => (
        <Tab
        textStyle={styles.activeText}
          activeTabStyle={styles.activeTab}
          activeTextStyle={styles.activeText}
          tabStyle={styles.tab}
          style={styles.tabContents}
          key={arr.tab}
          heading={arr.tab}
        >
          {arr.component()}
        </Tab>
      ))}
    </Tabs>
  </View>```

[fixurshitreactnative]

react native fix your shit this is actually embarrassing

[Cookizza]

This is hardly the fault of react-native. All it takes is a little thinking. Namely, you can't have tabs inside scrollviews. And that makes absolute sense. How would that ever work? Of course it would need to use some silly onLayout hack.

Tabs cannot be in scroll views - the tab should always be 100% height. The tab content itself can contain a scrollview if you need scrolling.

That is the purpose of the tabs component. The content within tabs scroll - not the tab itself.

If you are facing this problem take some time to consider your layout structure and if there's a scrollview of some sort somewhere further up your layout chain that doesn't really need to be there. I know I tend to overuse scrollviews.

[Cookizza]

Tallest tab height taken for all tabs.

why isn't this issue hasn't been fixed yet :( since my data is dynamic i couldn't find out the best solution mentioned above can anyone help me out

    <Tabs
      locked
      onChangeTab={onChangeTab}
      initialPage={initialPage}
      tabContainerStyle={styles.tabContainer}
      tabBarUnderlineStyle={styles.tabsUnderline}
    >
      {content.map(arr => (
        <Tab
        textStyle={styles.activeText}
          activeTabStyle={styles.activeTab}
          activeTextStyle={styles.activeText}
          tabStyle={styles.tab}
          style={styles.tabContents}
          key={arr.tab}
          heading={arr.tab}
        >
          {arr.component()}
        </Tab>
      ))}
    </Tabs>
  </View>```

Make the tabs 100% height & move scrollview to inside the actual tab content component. Tabs shouldn't be inside any type of scroll view so you may want to check for that. This will of course stop the tab headings from scrolling - but if you need this, all you really need is conditional rendering, not tab component.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Angelk90]

@GeekyAnts, @akhil-geekyants, @SupriyaKalghatgi, @shivrajkumar, @normdoow, @cbaker, @LasithaPrabodha, @andrew-luchkevych, @flashimxd, @shekharskamble, @lucie-macikova, @amaljosea, @tarun29061990, @harishlalwani, @Johncy1997, @Donhv, @AbanoubNassem, @maartenvandillen, @girginsoft , @victorsousadev , @gauravroy1995, @fxbayuanggara , @Cookizza, @tunshiyu, @ofgowtham , @ishdemon, @bharatpatil , @hanykumar, @Salman98 , @grimsammie , @Muralidevan :

I hope I haven't forgotten anyone. Even after years this problem seems to still persist, I think it is time to understand what the problem is and find a solution.

For those wishing to find the solution here is an example of the problem: https://snack.expo.io/-3wZ2AsKU

Please do not use different code or at least post a complete example on https://snack.expo.io to be able to test it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.