GeekyAnts / GeekyAnts/NativeBase
Problem Tabs does not fix and scroll infinite in the tab
- Dominant language
- TypeScript
- Stars
- 20.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
@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 (
{r.title}
);
}
render() {
return (
{this.state.info}
);
}
}
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.
Contributor guide
Research direction
Reproduce the issue with the linked Expo snack and the listed React Native, React, and NativeBase versions. Start by inspecting ./lib/index and the Tabs/Tab composition shown in the example, then verify behavior on both platforms. Done means the tabs remain fixed beneath the toolbar and each tab uses its own content height.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, react-native
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100