ReactNative ScrollView scroll threshold - react-native

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.

Related

RN ScrollView reduce amount of swipe needed

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.

react native infinite scrolling with performance optimization both horizontally and vertically

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.

Curved scrollbar in ScrollView on Android Wear 2.0

Is it possible to have a curved scrollbar like on WearableRecyclerView on ScrollView? How is it done?
Here is a reference to get you started.
To create a curved layout for scrollable items in your wearable app:
Use WearableRecyclerView as your main container in the relevant XML layout.
Set the setEdgeItemsCenteringEnabled(boolean) method to true. This will align the first and last items on the list vertically
centered on the screen.
Use the WearableRecyclerView.setLayoutManager() method to set layout of the items on the screen.
If you explore the document, you will be able to get in touch with the code snippet for customization of the scrolling.
For Circular Scrolling Gesture:
By default, circular scrolling is disabled in the
WearableRecyclerView. If you want to enable a circular
scrolling gesture in your child view, use the WearableRecyclerView’s
setCircularScrollingGestureEnabled() method.

Horizontally and vertically scrolling table view

I am trying to create a table view that scrolls horizontally and vertically like TeacherKit app.
If I scroll vertically, first row is fixed and if I scroll horizontally, first column is fixed.
Do you guys have any suggestions for that?
This is the screenshot from TeacherKit app.
https://www.dropbox.com/s/65cknxg9vnea8jq/Photo%20Nov%2015%2C%2012%2027%2010%20AM.png
The most common solution is to create a UIScrollView with the same size of your UITableview, and place your table INSIDE the scroll view.
In this situation, the table won't scroll because is fully contained in the scrollView (it has the same size) and you will scroll the scrollView
Let us know how it goes!

Grid view with background image horizontal scrolling

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.