React Native Swiper Custom - javascript

Is there an easy way to implement infinite fullscreen swipe up/down function (by pulling json data from the database) as well as swipe left/right?
On swipe down I need to change the screen according to the database entry - 10 items initially loaded and when reaching the last one, next 10 loaded from remote mysql database. On each screen there should be swipe right/left option to display details about the individual item.
I was thinking to use FlingGestureHandler https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/fling-gh/.
I am however not sure how to combine it with swipe left/right/up/down animation.

Related

How to Implement Infinite Scrolling with Infinite Data in React?

I need to implement infinite scrolling in a react app, while my data is huge and the use might keep on scrolling and scrolling for a long time.
All the infinite scrolling solutions that I've found only handle adding the data to the table whole scrolling. But I need to also remove data from the DOM to prevent the app from slowing due to tens of thousands of rows being potentially loaded after some time on the app (think social media feed).
I also don't want to keep all the data in the memory and I need to clean old data while scrolling (up and down).
So basically what I need to do:
Load the first 100 rows (1 page) to the page
When the user scrolls down and getting near the bottom, load next page and add to the bottom
When the page has a large amount of pages (lets say 5 page, or 500 rows) start to remove old pages from the top when the user keeps scrolling down
If the user start scrolling up, we need to reverse the functionality - Request the pages we removed again and add them to their place in the top
Does anyone know of such a solution?
Any recommendations on how to tackle this if I need to build from scratch?
Thanks!
1. Use react-infinite-scroll-component.
Follow instructions in documentation.
You can see basic example here. Here initially array have 20 elements and fetchMoreData function concatinate 20 more elements to it.
Basically you are concatinating, next elements in in array and adding them over, this is the concept of infinite-scroll.
For furthur references, link1, link2.
Or
2. You can implement you custom scrolling as well, like this

Make virtual scroller scroll to the top with a method

In my vuetify app I am using the vuetify virtual scroller for requesting more content as the user scroll down the list. Now, when the user makes a new request I would like to load the new list and make the virtual scroller scroll back to the top.
Currently, the new list is loaded in the virtual scroller but I cannot find a way to scroll back to the top, the scroller stays in the middle of the list. I want my method, which is called whenever a new query is made, to also make the virtual scroller scroll to the top.
What I've tried so far:
Setting the parameters of the virtual scroller, first and last to 0 and 11 (size of what is to be displayed)
Reloading the component with a v-if to reset it.
Looked into the vuetify documentation, nothing seems to be related to my problem.
Thank you for your help.

Modify animatingTo in flexslider

I've got a little application that shows one photo in the middle of the page, some right/left buttons for changing the photo, and a flexslider at the bottom of the page having thumbnails of all available photos. Depending on the width of the browser, 4 to 10 thumbnails are visible at a time.
I want to synchronize the slider with the main photo. I've turned animation off. And when I click on something in the slider, the main photo updates. I've got this working.
But when I change which photo is shown using the right/left arrows, I want to update the slider so that the thumbnail for the main photo is shown, as in, move the slider right or left. I tried just manually changing (increment or decrement) the slider.animatingTo value, but that doesn't update the slider on the screen.
I've also tried, by modifying the jquery.flexslider.js file, putting one of the update methods onto the slider object (essentially making it public). But I'm not sure what the right function to call would be.
Any help would really be appreciated.
I found the solution:
slider.flexAnimate(slider.getTarget("prev"));
and
slider.flexAnimate(slider.getTarget("next"));

Semantic-UI multiple sidebars pushing each other

I'm looking for a good way to realize a sort of breadcrumb navigation through a database using Semantic-UI (on top of Django, if that matters). The idea is to click on a link toggling the first sidebar, showing a dataset with in a form with each data offering a link to dig further down, opening the dug down data in another sidebar, shifting the parent further to the left. So in the end you end up with a horizontal "timeline" of sorts, made up of sidebars (or something else) that the user can then step back through, shifting everything back to the right.
The default sidebars seem to always overlay each other, so basically the question is, how do you make new sidebars shift existing ones?

Ember transitions in realtime

We use ember 1.8 along with https://github.com/billysbilling/ember-animated-outlet to make the transitions on the application look more like other mobile apps ,
However now we need this to work more like the "Tumblr" app where when an item on list is swiped the next view with details will slide over in realtime based on the swiping pattern ,etc that is more you swipe the more of the next view will appear and if you slide on opposite direction you stay on the same page.
Is it possible to do this in Ember or this kind of transition is not possible with our current app?
Please let me know if the question is not worded correctly.
We wanted to be sure this is achieveable in the ember before we try that route.

Categories