Height not updating on selected view

[tuomohopia]

Expected Behavior

When using animateHeight={true} the height of each container (view) should be automatically be updated according to their content.

When animateHeight={false} this problem does not occur. Every view's height is the same as the maximum view of any view, and that updates correctly when there is new content.

Current Behavior

Right now, only the currently active view will not update its height. The rest of the views update themselves correctly in terms of height.

My use case is a chat application. A new message received won't be displayed if I'm in the current view. It just won't update the height of my container. However, if I swipe to another view and back, it renders correctly along with the correct container (view) height.

I'm supplying new messages as props to a react component which uses <SwipeableViews /> to then render them. As far as I can tell, the elements do appear in DOM as they should. Just the height of the view of react-swipeable-views is not updating itself.

Steps to Reproduce (for bugs)

A small demo I made to display this problem:
https://codesandbox.io/s/clever-margulis-kswpt?fontsize=14

Open it in browser's mobile view and swipe to the left and back.

New messages received through the props should increase the height of the currently active container but they do not.

Your Environment

Browser environment.

react: 16.8.6
react-dom: 16.8.6
react-swipeable-views: 0.13.3

[tuomohopia]

After taking a look at the react-swipeable-views source, I think this may be related to how updateHeight() is called.

For example, here it is called when the user swipes to the node:

react-swipeable-views/packages/react-swipeable-views/src/SwipeableViews.js

Line 359 in 1242299

this.updateHeight();

And this does update the height in my demo too. However, when receiving new props this is not called, and the height does not get updated accordingly.

[tuomohopia]

Maybe it would make sense to check children in componentWillReceiveProps or componentDidUpdate and then update the height of the view there with updateHeight() ?

[tuomohopia]

I've opened a PR to fix this here.

[pandaiolo]

Until this PR is merged, I've been able to workaround this by calling the following when I want to recompute height manually:

// Recompute height
this.swipeableViewsRef.current
        .getChildContext()
        .swipeableViews.slideUpdateHeight()

// In render
<SwipeableViews ref={this.swipeableViewsRef} {...props} />

[arimendelow]

i have this issue too, and that fix didn't work for me in a functional component :(