Video description of the idea
I wanna make swipe animation as shown in the above video. BUT I don't know how to make a side of the view to be curved and animate it. So far I have achieved curve from where it can be draggable but don't know how to proceed further from it.
I have used d3-shape but don't think it's gonna work.
I know I can make it draggable using pan responder but what about animation effects around the circle which is being swiped?
Any idea of how should I implement it?
Related
I was researching this since last year from time to time. I always wonder how Instagram handles the feeds screen?
What kind a component they using for it?
I'm sure it's not a ScrollView becouse it's much more performant than a ScrollView.
It is not also a FlatList becouse I know the basics of the FlatList how it renders the rows etc... and I am sure that they don't use it. For example a FlatList renders the items on top of each other like a card stack. In this behavior you cannot achieve the current Pinch Zoom feature that they have.
I thought maybe they use flipkart's RecyclerListView which is based on Java and much more performant than ScrollView and FlatList, but I am not quite sure about that too.
Any ideas about what they using to achieve current functionality on the feeds screen?
I mean, is there a method or specific listing component to achieve same behavior with all the functions like Double Tap to Like, like Pinch Zoom with overlaying everything.
#Quick note about pinch zooming, it's nearly impossible to build a component with current states of ScrollView and FlatList which will be performant and has same functionality.
You can check out my other topic about that here
Long story short, I have tried a lot of methods and 3rd party components to achieve same thing, but still could not do it.
Thanks for your thoughts!
In my app, I have horizontal FlatList which is used for swiping between several sub-pages of a screen. This works great.
However, on one of the pages, I have a Slider component. On iOS it works fine, but on Android, the parent ScrollView of the FlatList seems to "steal" the swipe gesture. I am only able to adjust the Slider by clicking very precisely on its thin line, but I cannot adjust it by sliding.
What I need is something like one of these
A view that wraps the Slider component and stops swipe gestures from being propagated to the parent ScrollView
A way to make the FlatList/ScrollView not consume swipes directly on elements that responds to horizontal swipes themself
Somehow adjust the area of which the Slider component will eat the touches around it (it's very small and hard to hit directly). I already tried adding a hitSlop prop, with no luck.
Any suggestions for a solution are very appreciated :)
Check example code and result here.
https://snack.expo.io/#esbenvb/mad-yogurt
Is it possible to create a vertical ViewPagerAndroid on React Native, or is there a workaround for Android that ends up with a similar UI maybe using ScrollView?
This currently isn't offered out of the box since ViewPagerAndroid implements only horizontal scrolling, and scroll snapping is implemented only on iOS. These are two approaches I would suggest exploring:
Give the illusion of a vertical pager by using the transform style property to rotate the ViewPagerAndroid by 90 degrees, and then transform each child 90 degrees in the other direction so their net rotation is zero. This is the approach we used in InvertibleScrollView and it works well for some use cases. You might find the same technique useful with ViewPagerAndroid.
Implement scroll snapping on Android. On iOS, React Native already offers an API for specifying how a ScrollView should snap at intermediate points, such as at the boundary of each page in a pager. On Android you could subclass ReactScrollView and implement the same behavior natively. This would require more work than rotating the pager, but is a more robust solution.
I'm looking for idea how to resize map to full screen when tapping on it. It came to my mind that custom view controller transition my do the job. Only problem is I don't know where exactly should I pass frame from first view and animate it on second? Can't find proper example of doing that.
I'm trying to implement a grid view menu, with horizontal background scroll of three images triggered by swipe gesture, so only the background images are scrolled while icons remain still. I investigated AQGridView, GMGridView, OHGridView, but they seem to not include this feature, so I decided to implement my own grid view with custom buttons placed in grid formation. My doubts are how to implement the background image scroll. I have searched for different solutions, but I'm not able to figure out how to solve it.
Many thanks
If I understand your question correctly you could make a view with 2 subviews: a) the grid of icons (UIImageView) and b) a scroll view with your background images in paging mode (UIScrollViewController).
Just make sure your icons do not receive touches, so that the scrollview gets the touches.
If you want to make the icons tap-able, then it's a little more complicated; you could create an invisible layer on top and then manually handle the touches, which will get complicated. Or, what I would do, place the icons as subviews on the plain scrollview, and then move the icons in the equal and opposite direction that the scrollview is moving in to create the illusion that the icons are standing still, this will simplest to implement but is a bit of a hack. Mathematically speaking you want to apply a transformation to the scrollview and apply the opposite transformation to the icons which are in the scrollview's coordinate system so that in the global coordinate system (the screen) your icons do not move.