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
Related
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?
I have a vertical swiper where in one of the slides I have a box with overflowing Y content, I want the user to be able to scroll vertically within the box. But in both dektop and android mousescroll is not working. No scroll event is generating from within the box, and scroll is interpreted as swiping. I also have a multiline text field inside same slide but I am able to scroll in that, so it must be possible. How can I make it work the way I want to?
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.
In a react native screen, the top part is a flatlist, and the bottom part is a toolbar, with some buttons in it. And, there is also a hidden component which shows when a button is pressed. What I hope is, when the hidden component is showing, the flatlist is pushed up, so that lower part content of flatlist will be still on the screen.
But the reality is, when the hidden component is showing, it covers the flatlist. I have no way to make flatlist component automatically be smaller.
How to resolve this issue?
thanks
Try styling all three component using flex.
for e.g.
give flatlist flex:3
hidden button flex:1
toolbar flex:2
And now when button appears, height will be automatically adjusted.
Using a StackNavigator from React Navigation, when performing the back gesture (swiping the top card from left to right to pop it off the stack) there is a bright white overlay that appears on the card below. How do I change the color of that overlay or remove it?
You'd need to create your own Transitioner. Essentially create an Animated View that wraps your scene and adjust the opacity. See the docs with more info and examples.