I am trying to figure out how to create a bidirectional loading flatlist. Right now if you add data to the top of a flatlist, it will renreder and repositiin to the top of the flatlist.
I know there is a way some users have rigged up to perform an animated scroll. But that still creates kinda a choppy effect.
My thinking was if i had two flatlists, one of which serves as my new data, I could house those in a scrollview, and essentially get the scrollview to act like a window, And have its position not be affected by any of the rendering
Does anyone have a solution for any of this? I saw one of the RCs just added this to ios, but I am trying tonget it working on Android as well :(
Related
In my application I want to create a couple animations on my FlatList.
For example, after fetching the data and feeding it to the list I want the items that should be visible to slide from the left. When I'm scrolling each item (at the top) that supposed to disappear will slide out to the right and each item that should appear (at the bottom) should slide from the left. Is it possible in React Native?
I only managed to create one type of animation - items sliding right when they are about to disappear, but I don't have any idea how to make the items to appear from the left.
My Animated.View can receive only one type of transform. So how can create different types of input/output ranges for the top and the bottom of the list?
I tried to find some examples on the internet but couldn't find any for multiple animations, only for one type.
I think you will find React Native Reanimated's Entering and Exiting Animations API
useful for this task. It greatly simplifies animations like this in my experience.
In case you want to get more control. Using a FlatList, you can also use its onScroll prop to get the current value for YOffset (contentOffset.y) via the Reanimated useAnimatedScrollHandler. Thus you can figure out how much has been scrolled.
Which you could then use to manually apply any translateX's required to the Animated.View of whatever items the flatlist is rendering. The logic you'll of course have to figure out though. But it's a start.
Be sure to do any animation interpolates using UI thread worklets on Reanimated only. Good luck!
I have created a screen with a header on top with some buttons and a main component that will be scrollable and will contain many components called Category. Now I have created category component, and it is responsive on all screens (without wrapping in Scroll View)
When I try to wrap it in ScrollView or FlatList, the layout is behaving quite differently for smaller devices. It is better on Larger devices, but I want the same look on all devices.
This is the link to the snack to check it out.
Some of the code has been commented which means I have tried them but they didn't work and gave different behavior on different devices.
I have tried both flat list and scroll view with different stylings, but i wasn't able to find the perfect styling.
Mobile Phone dimensions i tried on:
5.8"
3.7"
4.0"
5.2"
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 am creating a Listview with pagination. If i put the ListView within KeyboardAwareScrollView then onEndReached not called properly. But if i don't put the ListView within any kind of Scrollview it is working perfectly.
My problem is that the content above the ListView is quite big. If i don't put it entire view within any scrollview the bottom content will not be shown.
How to solve this issue?
Thanks in advance.
Sorry I can't put comment because my rep is below 50.
I'm trying to imagine ur situation based on the description because there's no snapshot of ur desired outcome and current outcome. What I understood is this:
If i don't put it entire view within any scrollview the bottom content
will not be shown
This may be just the problem of not putting {flex:1} in the outtermost container view
If i put the ListView within KeyboardAwareScrollView then onEndReached
not called properly
ListView is deprecated as per React Native 0.55 documentation. I don't really understand your scenario, but you might wanna consider just using Scrollview or Flatlist, they might have the solution that ur looking for in a different form. If you are looking for a solution so that your view would avoid keyboard, u could simply use KeyboardAvoidingView from react native instead of using a third party lib, because sometimes they could be restrictive.
All the best! :)
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