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.
Related
I am stuck on implementing a UI in React.
I want to trigger a state change when an element crosses the centre of the viewport.
Here's a prototype of the design: https://cln.sh/sNhueq
In this prototype, the box on the right is sticky so it stays on the screen. And the list on the left moves as we scroll. I want to know when a list item crosses that red line so I can change the content of the box.
I am using framer-motion and react-intersection-observer.
Here's what I tried:
I tried using the viewport prop of <motion.div> but it triggers when the element enters the whole viewport. Yes, we can set root prop to an element's ref but for that the root element has to be an ancestor which the red line is not.
I tried react-intersection-observer but got the same results (because the ancestor limitation comes from the IntersectionObserver API in general).
I ultimately thought of some hacky non-performant ways like having a scroll listener, checking the bounds of root and target and finding if they collide. But I really don't want to do that heavy computing.
Is there any way with IntersectionObserver or something else that is performant?
Any help is appreciated. Thank you! :)
I have a flatlist with two columns which renders card components. Once a user clicks a card, it pops up by using Animated API of React Native.
I am changing the clicked component's ZIndex value to 10. When it is closed, the value is set to 0.
The problem is that this logic works only in row elements, but not between rows. So, every other card positioned in a lower indexed row, stays behind the others.
What should I do for this problem? Thank you in advance.
Here is the example;
I'm using the react-slick library to make a slider, and I would like to change active slides and the slide which is at the top of the slider. For example, if I click on a button in the current page, I want the current slide at the top of the slider to change.
Do you know if is it possible to do this properly with this library?
I found a solution on the react-slick github (https://github.com/akiran/react-slick/issues/738), which consists of creating a ref to the slideshow and setting the focus via this.slider.innerSlider.list.focus(). However, this does not work very well, because the element I want is not at the very top of the slider. For example, if I set the focus on the second to last slide, the first element of my list is not accessible any more via the arrows.
If this.slider is a ref to your Slick component, you can force the slideshow to show a slide by calling the method slickGoTo() with the index of the desired slide. For example, to show the second slide:
this.slider.current.slickGoTo(1);
For details on the methods that you can call using your ref, see: react-slick API: Methods.
In the Parent Component I have some <View/> positioned in a relative way.
In a children Component I need to replicate the rendering of some <View/> in the exact coordinates but this time in an absolute way (in order to put them upside the first ones).
How can I achieve this?
EDIT:
it's a tutorial-like screen, i need to add a View with a transparent background and a button that is present on the parent but it must be of the same size and position from screen top-left corner, independently from the device and screen resolution it must be on the same position.
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.