In one the FlatList's that I have in a project, when I scroll to the very bottom, and try to scroll back up, scrolling is stuck.
If I keep trying to scroll, after a while (less than a minute), scrolling resumes.
I am testing on Android.
I read about many issues related to scrolling, but haven't seen this one.
Any clue? (I am not attaching any code, since the code is quite complex and is not different than other FlatList's that I have in this project)
Related
I have problem with my scrollable materialTopTabNavigator stuff. When I swipe to another tab, I see delay, but then the selected tab aligns. My behavior in the first gif.
https://ibb.co/yXsCbFh
I need behavior like this, without delay and with auto align
https://ibb.co/c67BSQf
How can I achive this?
I'm having similar performance issues and am able to workaround them by disabling Remote JS Debugging.
or
Without spending much time into the issue, you might want to check debug > slow animations in your ios simulator.
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.
Sometimes in my UWP app I experience a problem while scrolling with my scrollwheel. Basically the scrollbar moves when I use my scrollwheel, but the content isn't rendered properly; resulting in an empty block which gets scrolled up and down.
Yet everything works fine when I click and hold the scrollbar instead of using the scrollwheel on my mouse.
I have to restart my UWP app in order to get things back to normal.
The issue appears while scrolling a default XAML ListView, but also in a RadDataGrid (Telerik).
I have made a screen recordingo of this issue, which hopefully will illustrate what's happening more clearly.
Click to see video
I haven't found exact steps to reproduce this issue, it just seems to be there at random from time to time.
Does anybody have an idea what might be going on here and how this could be fixed?
I watched this presentation and there's a section on how to build an IOS Maps like UI. When dragging from the bottom to top, it drags to the top, and after it reaches the top, it continues scrolling up. Also, when scrolling down, when it reached the top content of the ScrollView, it continues to drag down.
It is suggested that it can be done using ScrollView by adding an empty transparent cell as the first element on the ScrollView. I have tried implementing the same which can be found in this snack. In my case, instead of Maps, I am using another ScrollView.
But the problem is that the first element (transparent element) does not allow to interact with the First ScrollView elements. I have tried with pointerEvents inside the first transparent view and even in its parent ScrollView. But this does not help. Has anyone tried implementing this kind of use case with react-native? All I found was this library, but I think it's not maintained properly.
you need to set the z-index of the transparent view to send it under/behind the interactive content, here is a good resource:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Edit: Actually I could not accomplish it, it seems like everything inside a scrollview will always be behind or in front of other elements, it seems like you can't have part of the scrollview behind something else and another part in front of something else.
I have the same component in multiple screens, which I navigate to through React navigation. I'm using Tabnavigator.
On the first screen, the View containers move around if the text is too long. I have a fixed flex-size on my view containers, but it doesn't take that into consideration. The strange is, it's only on the first screen. A gif to show you what I mean.
https://gfycat.com/KaleidoscopicEasygoingApisdorsatalaboriosa
I have linked a Snack to show you my code:
https://snack.expo.io/#cronnay/show-inconsistency
I've checked if it's because of the scrollview I have, and I was inconsistent with my design on the scrollviews. but they all have the same styling.
What the heck is going on?
EDIT: Uploaded new gif that shows that I navigate to same component through two different ways. And it makes the design screw up.
https://gfycat.com/HappyPracticalAustralianfreshwatercrocodile