Height in different scene #290
Comments
+1 |
1 similar comment
+1 |
You need to handle it yourself. Listen to layout changes in individual tabs and set tab view's height. There are no plans to implement it. |
"There are no plans to implement it." - @satya164 |
Because you can implement it yourself and I don't want to work on or maintain a feature I'll never use. |
Can you help us achieve this (dont need the entire code, just the methods and values that need to change)? I'm just lost on how to limit the height of one particular tab-view. Now its possible to scroll the entire animated screen based on the height of the largest tab-view |
What's your use case? I'm don't know what you're planning to do, but I'm pretty sure that dynamic height for tab view is not the best solution. Regarding methods and values, there's nothing special, you measure the layout of components with And whoever is downvoting the comment that I won't do it, I am building this library for free and I'm not required to do whatever you want me to do. Thanks. |
I can't make it re-render for now so I need to set multiple parameters for every tab height. Parent:
and render function:
Children tab 1:
Children tab 2:
|
@yangnana11 thank you |
@yangnana11 thank you |
I ended up removing the tabs content from the tab control altogether. It's hacky but worked for me...
|
Based on @dseawel solution I came with my own aswell. I was using SceneMap to render my components. I changed to my own switch case so I could send a
To this switch case showed in the reference example, but sending a
And on the component just put a simple validation:
|
@dseawel @nicoleanater There are good, but it will force rerendering when click any tab. |
One way to change TabView's height is: import { Dimensions } from "react-native";
const SCREEN_HEIGHT = Dimensions.get('window').height
(...)
constructor(props) {
super(props);
this.state = {
tabView: {
index: 1,
routes: [
{ key: 'Media', title: 'Media' },
{ key: 'About', title: 'About' },
],
},
tabViewHeight: 522
}
}
setTabViewHeight = (currentIndex, tabIndex) => event => {
if (currentIndex === tabIndex) {
const height = event.nativeEvent.layout.height + SCREEN_HEIGHT * 0.08;
if (height < 487) {
this.setState({ tabViewHeight: 487 + SCREEN_HEIGHT * 0.08 });
} else {
this.setState({ tabViewHeight: height })
}
}
};
(...)
<TabView
style={ { height: tabViewHeight } }
navigationState={ tabView }
lazy={ true }
renderLazyPlaceholder={ () => <ActivityIndicator/> }
renderScene={ SceneMap({
Media: () => (
<View onLayout={ this.setTabViewHeight(tabView.index, 0) }>
<Media/>
</View>
),
About: () => (
<View onLayout={ this.setTabViewHeight(tabView.index, 1) }>
<About />
</View>
)
}) }
renderTabBar={ props => (
<TabBar
{ ...props }
style={ { backgroundColor: 'white' } }
labelStyle={ { color: 'black', fontSize: 12 } }
tabStyle={ { padding: 0 } }
indicatorStyle={ { backgroundColor: '#7DA89B' } }/>
) }
onIndexChange={ index => this.setState({
tabView: {
...this.state.tabView,
index: index
}
}) }/> We make use of We added We used |
@saniagh that work but you shoud need to type
|
This works for me, thanks. |
@amruu but the swipe is not working when we follow your solution.Can you please give an insight about this? |
@anuragdwivedi29 true that swipe gesture gets disabled, however you can implement custom gesture using this https://www.npmjs.com/package/react-native-swipe-gestures |
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} |
I found this useful in my case https://www.gitmemory.com/issue/react-native-community/react-native-tab-view/290/552070362 it says to hide the inactive tab content so that max height of tabview will always be the active one's height |
I had been using the same, unfortunately gesture does not work with this approach. |
Any other way to solve other than bypassing the renderScene method or cleaning the content of each inactive scene? |
I have written a solution that is based on the comment @satya164 said above: "Listen to layout changes in individual tabs and set tab view's height" Here you can see it: https://stackoverflow.com/questions/63606479/react-native-tab-view-always-has-the-height-equal-to-height-of-the-highest-tab/63611264?noredirect=1#comment112488635_63611264 Maybe it can help someone in the future. Pd: I have no idea how to do this with an inifinite scroll tab that uses pagination, but in my use case this works setting an undefined height to it. |
In my case, I have set the height for the tab which uses infinite scroll with pagination in Here is the error: |
in the solution @amruu provided I get that all my content is starting at the bottom for some reason. Anyone else experienced this issue? |
this works for me. Thx for posting |
I have fixed this with the preserve of lazy loading and swipe action
To detect and save flag when user swipe between the tabs (there was two props
I created a PR for this #1191 |
Not cool to use abusive tone 😠. He developed the library for Free. It is his wish wether we like it or not. |
How to fix differences in height from one tab to another?
The text was updated successfully, but these errors were encountered: