-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tabs too long (Tab height) #2915
Comments
I had this problem too a while ago. Make sure you wrap your Animated.ScrollView in provided by native base (Container should be the first tag in the class you use for the tabs). Also, for the content of each tab to be displayed properly, you need to wrap each child component of each tab in a . This is what worked for me. |
I had faced the same issue, I got it fixed by wrapping the Tabs component with the Container of the native-base itself. In my case i had long list in the 3rd tab so for the 3rd tab I had to specifically put Container style as height of 100% to make it scrollable, 1st and 2nd tab css I kept it as flex:1. For doing the same i gave the css to Container as <Container style = {[this.state.tabIndex === 3 ? {height:'100%'} : {flex:1}]}> This worked for me like a charm. |
Hi @599markus, please provide minimal snack reproduction for the same. |
Same issue here tabs are taking the height of the longest tab, As mentioned here. |
Try something like this,
And for tabs do Something like this T1 ->
Remember to disable the scroll view Inside the FlatList of tabs and wrap with a ScrollView with nestedScrollEnabled={true} |
@pragupnewzera This will work for the fixed height of the tabs but if the content size is dynamic then content will cut down from bottom after specified height. |
@appify-waheed Even if the content in the tabs is dynamic it would be rendered in the scroll view of tabs of given parent height. So basically every tab has height of the given parent (width/0.8 in this case) and nested ScrollView would come into effect afterwards when we try to scroll in the tabs. |
@prafgup but if nested scroll is enable it is also causing problem while scrolling, sometimes scroll gets stuck with nested scroll. |
@waheed25 Scrolling doesnt get stuck if you have manually disabled other scroll views inside the tabs and wrapped whole tab with nested Scroll View. |
@prafgup could you please give an example. What i did, disabled the inner scroll of the list and add height of on the root view inside the scroll and also nested scroll is enabled so it scrolls only to given height not according to content height. |
Create a createMaterialTopTabNavigator Data used to just render The list view depending upon key
Renders A List View
Tabs Similer To This
All Tabs Height are dynamic , as the lists are fetched from api. |
@pragupnewzera could you please make a snack with these native-base components because I think the issue could be in ptomasroos/react-native-scrollable-tab-view#415 My implementation is similar as you suggested above I have a |
@appify-waheed I'll try to make a snack and update here in a few days. |
duplicate #1501 |
@andreeaohno: You could post a full example at https://snack.expo.io? @waheedakhtar694, @prafgup, @waheed25: |
@Angelk90 |
@juliscotto : No solution yet. |
@Angelk90 any update? |
@alicja99 : No solution yet. |
@599markus, @andreeaohno, @lakshaya22, @hanykumar, @waheedakhtar694, @pragupnewzera, @prafgup, @waheed25, @juliscotto, @alicja99: I hope I haven't forgotten anyone. 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. With reference to the issue: #1501 |
Hey @Angelk90 , thanks for the snack, I have added a hotfix here which almost mimics the required functionality you want - https://snack.expo.io/ir57Y3gfb The changes were in these lines -
I know this is not the exact required functionality as you would want as you want to collapse the toolbar as soon as scroll starts, the only way I can think of doing that is to add a callback function from CollapsingToolbar to enable nested scroll on the tab when the toolbar is collapsed so the nested scroll can begin. |
@prafgup : We can say that a starting point, actually the part of the two tabs info and movies should not flow, which happens. |
I didn't get you what you meant by "should not flow" ? |
@prafgup : What I mean is that it should scroll the content of the tabs, it shouldn't scroll the tabs themselves as well. |
You would have to create custom logic for that like mentioned in end of #2915 (comment) |
Hi.
Since a while I have the problem that my tabs always take the length of the longest tab ...
With prerenderingSiblingsNumber = {0} (default) it is the case that the first time the
length is right, I change then in Tab 2 or 3, which are longer than the first and then
back again, the first tab is much too long and shows a lot of white space at the end.
I have gone through these following points
Issue Description
node, npm, react-native, react and native-base version, expo version if used, xcode version
Node v11.8.0
npm 6.5.0
react-native 0.58.6
native-base 2.12.0 (same with version 2.13.5)
Expected behaviour
The individual tabs should only be as long as the content
Actual behaviour
The tabs are all as long as the longest tab (in my case, the last tab contains a list and can be very long)
Steps to reproduce
Imports
import {ScrollableTab, Tab, TabHeading, Tabs} from 'native-base';
Inside main View
Is the bug present in both iOS and Android or in any one of them?
both, Android and iOS
Any other additional info which would help us debug the issue quicker.
I also tried wrapping each tab with a content-Tag, but the problem remains the same
The text was updated successfully, but these errors were encountered: