search

oliviertassinari / react-swipeable-views

A React component for swipeable views. :snowflake:
https://react-swipeable-views.com/
MIT License
4.46k stars 480 forks source link

Height not updating on selected view #535

Open tuomohopia opened 5 years ago

tuomohopia commented 5 years ago

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 commented 5 years ago

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: https://github.com/oliviertassinari/react-swipeable-views/blob/1242299baceea36925cc98deb688d6d2e315f464/packages/react-swipeable-views/src/SwipeableViews.js#L359

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 commented 5 years ago

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

tuomohopia commented 5 years ago

I've opened a PR to fix this here.

pandaiolo commented 5 years ago

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 commented 1 year ago

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