Im using a library that allows scrolling. It does the job, but the issue is that there is a bug where the view expands the height of the largest view. So there will be a large gap underneath the first view. Note that it is only happening when the component first renders and goes away when I scroll to another view and scroll back to the first view. Essentially the problem fixes itself if i were to scroll to another view and come back and its a result of the animateHeight prop that is available in the library. It basically adjusts the height when there is a change in view. However, the reason im still seeing it in the first view whenever the component first renders (after a page refresh) i think is because no change is being detected. So the library introduced this new function as more users have been complaining about this issue. Its called the

updateHeight

function.

This is the code they are using in the library's pull request for this updateHeight function:

  componentDidUpdate(prevProps) {
    // If animateHeight is on
    // and has changed children, readjust height
    const { animateHeight, children } = this.props;
    if (animateHeight === true && prevProps.children !== children) {
      this.updateHeight();
    }
  }

However, this hasnt done the trick either. Basically what this function was supposed to do is detect when the children has changed and update height accordingly.

So what I did is go into the children of the SwipeableViews container and did a componentDidMount/componentWillMount/shoudComponentUpdate

However, its still no bueno. Is there something im missing?

Please see my code for the SwipeableViews Container:

<SwipeableViews
        action={(actions) => {
          this.swipeableActions = actions;
        }}
        index={currentTab}
        onChangeIndex={
          this.setCurrentTable
        }
        containerStyle={this.useSwipeableViewContainerStyles()}
        animateHeight>
        <div>
          <FoodsTable
            updateHeight={this.UpdateSwipeableViewHeight}
            ref={this.defaultTableRef} />
        </div>
        <div>
          <SportsTable
            updateHeight={this.UpdateSwipeableViewHeight}
             />
        </div>
        <div>
          <BarTable
            updateHeight={this.UpdateSwipeableViewHeight} />
        </div>
        <div>
          <RotationTable
            updateHeight={this.UpdateSwipeableViewHeight}
             />
        </div>
      </SwipeableViews>