Problem Tabs does not fix and scroll infinite in the tab

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

[LasithaPrabodha]

@Angelk90 @lumlnous

I figured out that if you write the code like this, the height will be different according to their content.

<Container>
        <Header hasTabs />

        <Tabs>
          <Tab heading="Tab1">
            <TabOne />
          </Tab>
          <Tab heading="Tab2">
            <TabTwo />
          </Tab>
          <Tab heading="Tab3">
            <TabThree />
          </Tab>
        </Tabs>
</Container>

But this won’t

<Container>
	<Header hasTabs />
	<Content>
		<View><Text>Hi</Text></View>

		<Tabs>
			<Tab heading="Tab1">
				<TabOne />
			</Tab>
			<Tab heading="Tab2">
				<TabTwo />
			</Tab>
			<Tab heading="Tab3">
				<TabThree />
			</Tab>
		</Tabs>
	</Content>
</Container>

[akhil-ga]

@lumlnous tried placing tabs inside a component. I was able to scroll the tab content. Attaching a gif.