React Native SectionList scroll to the top while refreshing - javascript

I am using a SectionList to display a list of data. I have a top menu where a users can click these buttons to display a different set of data on the list, think of it like tabs. All this is working fine, the correct data is being shown and it's refreshing properly.
However the problem is that when a user scrolls down, say halfway, on the list then clicks one of the buttons at the top the list does not show the refreshing animation (the spinning circle) anymore. I have correctly implemented the refreshing property and that works whenever I pull down to refresh.
Also if you scroll to the top of the list then click one of the buttons the refresh icon also shows up as intended. The problem is whenever you scroll down the list and then set the refreshing property the list does not show the icon.
<SectionList
refreshing={this.state.isFetching}
onRefresh={() => this.onRefreshList()}
....
...
/>
Then whenever I make a call to start updating the data...
this.setState({ isFetching: true }, function() {
....
....
//all code in here works fine the list shows activity monitor no problems
//when you scroll down on the list THEN
//call this the activity monitor can't be seen on the list
});
So to counteract this I tried to scroll to the top automatically before calling my actual refresh. This kinda of works but it looks really bad. There is no callback so I don't know when the list has completed scrolling to the top.
//this also works properly and scrolls the list to the top but
//it's really jumpy and looks terrible because the data is immediately
//replaced while it's scrolling to the top, the loading animation can't be seen.
this.sectionListRef.scrollToLocation({
animated: true,
sectionIndex: 0,
itemIndex: 0,
viewPosition: 0
});
Is this a known issue? Are there any workarounds or am I just doing something wrong here?

Related

onScroll firing more than it should (with example) React-Native-Snap-Carousel

I want to make scroll view where while items are red there should not be snap to item enabled, just like free scrolling. When you click on an item, it turns green and you snap to it. It works, but there are some flows I'm not sure how to fix. Here is a working example of my program (I recommend running it on your own device since it is faster than an emulator).
The first and the main problem will be visible if you set showWhatsWrong to true. When you press on an item, you snap to it, it quickly turns green and back to red (it should turn green and stay green). My guess is that this has something to do with onScroll. When I snap to an item, send is set to true, but I think onScroll gets called again, changing send back to false. It turns out that if I set send to true 100ms after onSnapToItem, everything works fine (onScroll is probably called in that time frame).
The second problem is that when activeSlideOffset is set to width, onSnapToItem is not triggered. Changing useActiveSlideOffset to true (which will change activeSlideOffset from 20 what is default) will result in the alert in onSnapToItem not triggering when snapping to items. In my case, I would like activeSlideOffset = {width}, but then onSnapToItem does not get called.

Make the user's viewport scroll up upon clicking a certain css class or ID

(for reference I am using DIVI for Wordpress, trying to accomplish this with a code block)
I have a slider/carousel with 7 steps that all have "next" and "previous" buttons for the user to go through. When a user clicks next onto step 2, because the step 1 window is larger than step 2, it means their window is now below step 2 (the "next" and "previous" buttons are at the bottom of each slider).
The buttons currently use a # link to open the next slider which works well, but I need a function that makes it so when one of the links (all have the class ".rv-welcome-stagebutton") is clicked, it moves the window back up to the top of the carousel.
So the user doesn't have to constantly scroll back to the top of each stage.
I have tried using the current code on the page but no luck.
TLDR: what I'm trying to achieve -
User clicks a link with css class ".rv-welcome-stagebutton"
scroll the window up to the top of the section with ID "#rv-welcomeslider-container"
[GIF OF PAGE IN ACTION: https://i.imgur.com/fQiFjnK.gif]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
jQuery(document).ready(function(){
$('.rv-welcome-stagebutton').click(function(){
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});} }
</script>
EDIT : I made few mistakes in my last response, I fixed it now, try it.
I think I can fix this for you. You already use jQuery, so that's great.
First, we gotta see what is a distance between top of the page, and top part of your section (#rv-welcomeslider-container).
We can do this with jQuery offset().top which will return how much is your section far from the top of the document.
So, we write : let getSectionCoords = $("#rv-welcomeslider-container").offset().top;
Now all we have to do is add a click event to every button (.rv-welcome-stagebutton), and make it scroll right to the top of your carousel section (which is getSectionCoords now).
So, here is the final code :
let getSectionCoords = $("#rv-welcomeslider-container").offset().top;
$('.rv-welcome-stagebutton').on('click',function() {
$('body').animate({scrollTop : getHeadingThree}, '500');
});
Let me know if it worked :)

Why doesn't FlatList scroll smoothly till the end of the list on Android?

As you can view it in the GIF, on scrolling the list swiftly, the scrolling stops at the end and on scrolling again, the next set of data loads. This continues until the list ends. This is only happening on Android. I can smoothly scroll through the list till the end on iOS without any abrupt scroll stops.
But on Android, there is an abrupt scroll stop and then on scrolling again, the next set of the list is loaded. Please note that I have also tested it on the actual device and the issue persists.
The user might feel that he/she has reached the end of the list and might not scroll further.
Below is the code that has been written to render FlatList:
<FlatList
data={ showtimeList }
renderItem={ this.renderShowtimesSection }
showsVerticalScrollIndicator={ false }
keyExtractor={ this.getListKey }
extraData={ this.props }
initialNumToRender={ 10 }
/>
showtimeList holds a static array of objects. I am not making any API calls to load additional data on reaching the end.
Is there anything I can do to optimize the code for smooth scrolling without any scroll stops? Thanks in anticipation.

Scroll up menu style with hover

Need help.
I have make some menus with vertical scroll on hover event, there are 3 menus (home,download,contact). The Scroll effect on hover event has worked, but on click event some bug occur (some menus can't scroll down/scroll to grey side with animation) when other menus has been clicked. the bug occur when i clicked menus in some sequence:
1. download then contacts
2. contact then download
3. contact then home
this is my code in jsFiddle
and when i run the code on firefox with firebug some error appear after i do mouse over and mouse out on clicked menu.
Error Print screen:
Thank for advance :)
The reason behind the freezing of the scroll event, when you click on a menu is that, after you click , the menu becomes disabled, hence your background-pos never changes and so , the method css(bg-pos) becomes undefined and you are again trying to do (undefined).split(), which is not possible and hence the animation freezes.
What you need to do is on click, you need to enable the menus again. This is done through this code:
$.fn.stopBG = function (x, y, speed) {
if(event.which == 1){
$("#home").removeClass('disable1').addClass('enable1');
$("#download").removeClass('disable2').addClass('enable2');
$("#contact").removeClass('disable3').addClass('enable3');
}
var pos = this.css('background-position').split(' ');
I have updated your fiddle, see this one : http://jsfiddle.net/VSTAm/3/
I have tried this fix in chrome...it works properly there.

jCarousel adding items from JSON object onclick, wont scroll

I have 4 or 5 JSON objects that are created dependent on a menu item being click, what I am wanting to do is,
The user clicks a menu item (Walls for example)
A navigation bar is show that show thumbnails of the choice of walls that are available, the navigation bar is long and thin (horizontal across the page), with jCArousel it should show 4 choices ad then on clicking the next button it should scroll to the next 4.
If the user then clicks Doors, the walls navigation should dissapear, the subnav (and jcarousel) should then get populated with doors.
I am not having a problem populating the jcarousel with new data, I am having a massive issue getting it to scroll once it has been repopulated.
For some reason I cannot get the Fiddle working with the JSON object, but click floors and the doors and you should get hte GIST of what I am trying to achieve.
The function is causing a problem I believe is,
function mycarousel_itemAddCallback(carousel, first, last, data)
{
// Simply add all items at once and set the size accordingly.
console.log(data);
for (i = 0; i < data.length; i++) {
$("#secondary ul").add(i+1, '<li><img src="http://placehold.it/141x75"/></li>');
}
$("#secondary ul").size(data.length);
}
Do I need re-initializze the carousel after adding new data or something?
From documentation:
reload
Reloads the carousel. This method is useful to reinitialize the
carousel if you have changed the content of the list from the outside
or want to change options that affect appearance of the carousel at
runtime.
$('.jcarousel').jcarousel('reload', {
animation: 'slow'
})

Categories