I am using React Transition Group to animate in/out some list items, example: https://codesandbox.io/s/43v5wj62q9?file=/styles.css
However I need to smoothly animate the list height whenever a list item is added/deleted, right now it just snaps to its intrinsic height without a smooth transition.
Is there a way to achieve this?
Related
I have a list of contacts.
If the user scrolled down to "Simon" and then resized the window, the scroll position jumps to the top (equal to 0) and i want it to stay at the same position.
I tryied saving the scroll position to the state using onScroll like this:
this.savePosition(params.scrollTop);
and then on window resize event to read the position from the state and scroll to there like this:
this.ref.current.scrollToPosition(this.state.scrollPosition);
but the problem is, the resize event causes onScroll to happen and onResize the state is always getting updated to 0 so my state is worth nothing.
How can i get this to work?
Solved.
Instead of scrolling to position via resize event, i do it via scrollTop like this: scrollTop={this.state.scrollPosition}
I'm implementing a carousel and I want to target the element at the center of the slider. So, I can make it pop a little.
How can I target this component? I have found ways to know if the element is inside the viewport or not but I want to know if it's horizontally centered.
Original Problem
Horizontal scroll and set state
Since you have no code my answer will be more theoretically how to do it.
So first off you should have a boolean state that you can toggle for the active state. This state should be controlled by the container. That way you can only activate one at a time.
Next you should get 2 values, the X scroll position of the container and the center point of the visible area of the gallery.
Then you can just calculate an offset on mount and then X scroll of the gallery.
So in theory it starts at 0 and your container is 500px you know that the active slide is at the 250px mark so you can calculate that with the position of the slide, it should be the last slide that passed that point. then just recalculate this value on scroll. (maybe throttle)
Possibly able to use react-hook-inview
I've used this react hook before on the Y axis. I'm not 100% sure that it works on the X scroll. But it can be a great way to trigger a state change on each of the slides. The only issue is that you'll be adding a event listener to each of your slides (possible performance hit).
You can see that lib here
This one lets each slide control it's own inView state.
Hi everyone I try to achieve an effect on an horizontal flatlist in REACT NATIVE.
Actually I have two Flatlist, the top one is Horizontal which contain 9 items like this :
As you can imagine the flatlist overflow so we don't see all the items so we can scroll with touch event.
I want to when a user click on one of the items the red bottom line move animated under the good item. the black one is a static one indicator.
I use the ScrollToIndex flatlist property to move the item a center of the screen.
I cannot get the right X position to animated the slide active indicator from the previous item to the new one.
the Slider is an Animated.View position as absolute with a translationX transform property.
Does anyone have an example or an explanation for that.
Thank you.
CcHuMi
I'm using a List inside of InfiniteLoader. Is it possible to animate the scroll to a specific element that's been loaded?
I think the animation is important as it gives the list time to calculate the height of each row.
I've tried using scrollToPosition on the list but it doesn't calculate the rows above. So when the use scroll up, the items jump about.
Referring to this question and answer by Shai Almog:
Rebuild list of containers without scrolling the list
I have a form with one container (TableLayout), which contains several rows with labels and buttons. Clicking a button changes the order of the rows and rebuilds the whole form (after myForm.removeAll() ). After myForm.revalidate() the form jumps to the top.
I am trying to implement this exact behaviour, to return to the same point (scroll position Y) after revalidating/changing the container contents.
I subclassed the Container-class to make setScrollY(int) visible. Using this with an arbitrary value does not scroll to the position, so it seems that the setScrollY method is not changing the scroll position of the content pane overall.
And myContainer.getScrollY() always returns "0". I only get the scroll position by calling getContentPane().getScrollY().
But it is obviously not possible to call the setScrollY()-method on the content pane - as it is not possible to subclass the content pane - to scroll back to the same position after revalidating the form.
Thanks for any advice!
Use border layout which disables the scrolling of the form/content pane.
Place your container (where you exposed setScroll) in the center and make sure to invoke setScrollableY(true) on that Container.