Got some issue when I put the tabview in <ScrollView>.

[changyu2hao]

The tab will not automatically change height while changing tabs, thus making some blank space in short tabs
Here are the versions I'm using:

"react-native-tab-view": "^2.14.4"
"react-native-gesture-handler": "^1.5.0"
"react-native-reanimated": "^1.4.0"

After further investigation, this issue is happening because I have 3 tabs, one of them much longer than the other two. All three tabs are the same height so the two shorter tabs with less content still scroll the full height of the longest tab's content. Any way to stop this?

EDIT: It looks like this library isn't designed to be used like this: #1019

The UI we have requires things to be scrollable before getting to this tab section in the app. Any suggestions on how to do something like this would be very helpful. pray

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• ``

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-gesture-handler (found: 1.5.0, latest: 1.6.1)
• react-native-reanimated (found: 1.4.0, latest: 1.9.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[kevinmcalear]

@changyu2hao did you just copy and paste my comment on your first issue? lol. I'm still trying to figure this out, have you made any progress?

[GeorgeTsendra]

guys, you can set in component in _renderScene props
isActiveTab={this.state.index === 0} - for example

 _renderScene = ({route}) => {
    switch (route.key) {
      case 'gallery':
        return (
          <Component
            isActiveTab={this.state.index === 0}
          />
        );

and hide inside tab content if this tab not active

render() {
    const { isActiveTab} = this.props;
    if (!isActiveTab) {
      return <View />;
    }
.......

[changyu2hao]

@changyu2hao did you just copy and paste my comment on your first issue? lol. I'm still trying to figure this out, have you made any progress?

@kevinmcalear No, I haven't. I gave up and use another way to do my project. But the method mentioned by @GeorgeTsendra works

[kevinmcalear]

Awesome! This works great. Thank you @GeorgeTsendra (& @changyu2hao for making the issue) I modified this to be used with react hooks:

to manage the required state for the tabs:

const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
  {key: 'first', title: 'First'},
  {key: 'second', title: 'Second'},
  {key: 'third', title: 'Third'},
]);

to render the tabs themselves:

const FirstRoute = ({isActiveTab}) => {
    if (!isActiveTab) {
      return <View />;
    }
   .......
}

what the renderScene function could look like in the TabView:

<TabView
    navigationState={{index, routes}}
    renderScene={({route}) => {
        switch (route.key) {
        case 'first':
            return FirstRoute({isActiveTab: index === 0});
        case 'second':
            return SecondRoute({isActiveTab: index === 1});
        case 'third':
            return ThirdRoute({isActiveTab: index === 2});
        default:
            return null;
        }
    }}
    onIndexChange={setIndex}
    .......
/>

[vobear]

guys, you can set in component in _renderScene props
isActiveTab={this.state.index === 0} - for example

 _renderScene = ({route}) => {
    switch (route.key) {
      case 'gallery':
        return (
          <Component
            isActiveTab={this.state.index === 0}
          />
        );

and hide inside tab content if this tab not active

render() {
    const { isActiveTab} = this.props;
    if (!isActiveTab) {
      return <View />;
    }
.......

Not the best way

[paulsjohnson91]

@vobear do you know of a better solution I can try?

[okwasniewski]

Closing as a duplicate of #1349