Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tab not rendered after dynamic ScrollableTab update

See original GitHub issue

After ScrollableTab dynamically updated, sometimes Tab won’t get rendered.

I modified the scrollableTab.js (from the Kitchen Sink example) for this issue, please follow the steps below to reproduce it:

use the attached code to replace scrollableTab.js file
lauch app, and goes to “Tabs > Scrollable Tabs” from menu
please click ‘Tab3’ immediately
after 5 seconds, the ScrollableTab will be dynamically udpated, and it shows that ‘Tab5’ is the highlighted one, however, the ‘TabFive’ content is not rendered, it shows an empty view.

import React, { Component } from "react";
import {
  Container,
  Header,
  Title,
  Button,
  Icon,
  Tabs,
  Tab,
  Right,
  Left,
  Body,
  ScrollableTab
} from "native-base";
import TabOne from "./tabOne";
import TabTwo from "./tabTwo";
import TabThree from "./tabThree";
import TabFour from "./tabFour";
import TabFive from "./tabFive";

class BasicTab extends Component {
  constructor() {
    super();
    this.state = { small: false };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ small: true });
    }, 5000);
  }

  render() {
    let tabs = (
      <Tabs renderTabBar={() => <ScrollableTab />}>
        <Tab heading="Tab1">
          <TabOne />
        </Tab>
        <Tab heading="Tab2">
          <TabTwo />
        </Tab>
        <Tab heading="Tab3">
          <TabThree />
        </Tab>
      </Tabs>
    );

    if (this.state.small) {
      tabs = (
        <Tabs renderTabBar={() => <ScrollableTab />}>
          <Tab heading="Tab4">
            <TabFour />
          </Tab>
          <Tab heading="Tab5">
            <TabFive />
          </Tab>
        </Tabs>
      );
    }

    return (
      <Container>
        <Header hasTabs>
          <Left>
            <Button transparent onPress={() => this.props.navigation.goBack()}>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title> Scrollable Tabs</Title>
          </Body>
          <Right />
        </Header>

        {tabs}
      </Container>
    );
  }
}

export default BasicTab;

Issue Analytics

State:
Created 5 years ago
Comments:13 (6 by maintainers)

Top GitHub Comments

2reactions

rawteechcommented, May 9, 2019

Hey guys, is this issue solved, or in the process of getting solved? Is it possible to render <ScrollableTab /> dynamically using the map() method? I seem to have the same problem too, tried wrapping it around <React.Fragment /> and <View /> but no success. As in 👇

rendered_data = 
  <React.Fragment>
    {data.map(item =>
       <Tab heading={item.title} key={item.id}>
          <Text>Some data</Text>
      </Tab>
    )}
  </React.Fragment>

return (
  <Container>
      <Header hasTabs/>
      <Tabs renderTabBar={()=> <ScrollableTab />}>
          {rendered_data}
      </Tabs>
  </Container>
);

0reactions

ssijucommented, May 21, 2020

I solved this issue. This is work for me to do the dynamically tabs using map().

Screenshot from 2020-05-21 21-32-28

Top Results From Across the Web

Scrolling issue with dynamic tabs in Kendo UI for jQuery - Telerik

Hi I have a TabStrips that gets the tabs from external source (dynamic) and the scrollable property is not working for me.

primefaces nested tabview and tabs, not able to scroll tabs

Version 5.3 adds the scroll controls if space is to small to show all tabs on initial rendering. Version 5.2 doesn't for nested...

React Tabs component - Material UI - MUI

Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow, and the text will...

React Native Tab View - Best of JS

Note that some functionalities are not available with the React Navigation 4 integration because of the limitations in React Navigation. For example, it's ......

Building a Tabs component - web.dev

A foundational overview of how to build a tabs component similar to ... elements are in here, the browser will render a scrollbar...