I am trying to build a screen, where we have a horizontal calendar on top which scrolls horizontally and a vertical calendar on the bottom using https://github.com/marcocesarato/react-native-big-list
An example picked up from Supershift
When we scroll bottom vertical calendar, top horizontal calendar should also scroll in sync and vice versa.
Both the calendars are using big-list. Is there a way on how to achieve such a thing?
Any hints are appreciated.
Related
I'm using a ScrollView for my app onboarding (horizontal scrolling/swiping).
How can I reduce the amount of swipe needed to move to the next page? (with pagingEnabled).
I want the user to be able to scroll with shorter swipe lengths rather than having to drag a lot to one side or the other.
And if I don't use pagingEnabled and instead use snapToInterval/Alignment and decelerationRate, I have this issue where the user can scroll multiple pages at once.
I'm building a month view calendar and need to be able to swipe left and right for next and previous months.
I'm currently using a horizontal FlatList for this, which works great going forward in time (scrolling right). It just adds months to the end of the list. But I can't figure out how to effectively scroll back in time (scrolling left). When I add items to the left side of the data, the scroll position gets jerky.
I am resetting the scroll index when a new item is added to the beginning of the data array, and that works in a perfect world. But the problem comes when a scroll action is in motion while the index is being updated. In that case, the scroll position gets jerky.
Has anyone solved this problem?
I need a ListView or Table or any other custom component that can have infinite scrolling in both horizontal and vertical directions. For example, 10,000 rows and 10,000 columns. We have the react-native's FlatList component but it can be used for either vertical or horizontal but not for both. If the data is finite, we can go with implementing a vertical scrollView inside a horizontal scrollView or vice-versa. But as we are looking for infinite scrolling, we are not able to use scrollView as it tries to load the entire content when the app is opened and the memory consumption is very huge so that the app automatically crashes. Does anyone have any idea if there are any third party libraries that can scroll both vertically and horizontally and also can look after the performance? Actually, is that possible to build such a component on our own in react-native? If so, please tell me if you have any ideas.
I am trying to understand how can I set a threshold for the RN ScrollView.
This is because if you have multiple vertical scrollable View in a horizontal ScrollView then the scrolling of the Views is very difficult.
So i just need something that holds the horizontal scrolling until the finger swipe horizontally for a certain pixel-span.
Has anyone a clue about how to archive this?
You can use the native scroll event in onScrollEnd to get the velocity of the scroll, then only scroll horizontally if it's past a certain amount. On most vertical/horizontal scrolls, most users only scroll in one direction. If you truly want to implement a distance based scroll, you would need to attach a PanResponder to your component and compare the distnaces of the Grant and Release events.
In my app I use a page control and a UIScrollView to page horizontally, I'd like to be able to enable vertical scrolling on each page. Now I know you can nest UIScrollViews in order to achieve this, there is however one problem in my project. Each of the pages uses a view controller consisting of a view, with a background image (different image for each page). This background image should not move while scrolling up and down.
Now what I want is the ability to have buttons, regular rect buttons, which I create in Interface Builder (since I want to be able to design and update the positions easily) and which then can be scrolled vertically.
So it should be like this:
You see a screen with a page-control on the bottom, above it an image with buttons over it. When you scroll sideways, you go to another page, again with an image (another one) and with different buttons. Now whenever you scroll vertically on a page, the buttons should be scrollable (so I can have a LOT of buttons on 1 page), but the image should maintain it's position.
So I figured, I just add another scroll view on top of the view with the background image. This works fine since I now have my buttons hovering over the background image and I have a separate nib file for each page including the buttons. But when I do it like this, the scrollview with the buttons becomes un-scrollable vertically. I don't know why this is happening, so could anyone suggest me how to achieve the wanted result?
I'd be really really grateful!
Thanks,
Fabian