Could you tell me how to solve the problem with scrolling in react-select when loading data. After query execution and data rendering, there is an automatic scroll up, how can this be fixed? This behavior is observed only when using a custom component MenuList, no matter what library is used for infinity loading, I will be grateful for any help
CODE - https://codesandbox.io/s/cool-merkle-d2wjh8?file=/src/SelectWrapper.jsx
Related
I am trying to use pull to refresh from FlatList. Is it possible to move the spinner to where the data actually starts rendering instead of the top of the screen? I found the progressViewOffset that works on Android but I am trying to find how I can implement this behaviour on iOS too. I feel like my solution is to watch scroll interactions and go on from there.
Any idea is appreciated. Thanks in advance.
I am creating an app with a Leaflet map in Nuxt using Vue2Leaflet plugin.
I am having a problem though: I am using Bootstrap columns to size the map and accompanying image, but the image loads too slow (this cannot be resolved at this time), so the container is not the proper size when the map loads.
This causes the map to be half grey. I have attempted to call map.invalidateSize() in the mounted event, but even that must be happening before the image finishes loading.
I have setup a sandbox at: https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue
In order to see the bug, you have to view the rendered app at https://c3453.csb.app/ (the internal codesandbox render does not show the problem)
I think I need some way to wait until the image has completed loading (so the BS col is the proper size), then call map.invalidateSize(), but I am not sure how...
You can attach an onload listener on your <img>, so that you can call (again?) your Leaflet map invalidateSize() method.
I have a FlatList, where the items are posts with their images and some texts. I don't want to render all images when the component is mounted. I want only load the images which are already seen. Is there any way to load only viewport images?
I finally found a solution for this. I used onViewableItemsChanged prop of FlatList. The logic is the following: with this prop you can see the items which are seen. You can register them properly (for example I add postSeen: true to each seen posts in the application state). That way you will have all changes under your hand and will be able to use them as needed. Hope this will help someone else.
If you have another solution for this, I will be happy to know. Thanks
I built an alphabet scrubber that scrolls a SectionList. The SectionList is optimized through the use of getItemLayout. If I scrub over the alphabet, the scrolling happens as planned, but the SectionList does not rerender until I release my finger from the screen.
See this expo snack
Anyone ideas on how to solve this?
Solved it by going through the source code of PanResponder. PanResponder sets an interaction handle through the InteractionManager. You can access this handle through this.panResponder.getInteractionHandle() (undocumented feature), and then clear it everytime you scroll to a location in the SectionList:
if (this.panResponder.getInteractionHandle()) {
InteractionManager.clearInteractionHandle(
this.panResponder.getInteractionHandle()
);
}
This will move the SectionList up in the queue for doing its visibility calculations and renders.
I advice to heavily optimize this by clearing the interaction handle as few times as possible, since the InteractionManager is used for performance reasons.
For the sectionList to update dynamically you need to place the data its using into State. This Expo example(done by someone else), is a good example:
https://snack.expo.io/Syy1bqKxW
His panResponder has all its data in state and on every "handlePanResponderMove" he calls setState() to update the position every time it moves. All in all, if your data is not in state, it will not update dynamically for you. Placing your data into state in React-Native is how it keeps track of your data changes dynamically.
Hope this helps!
Using the react native's official Modal component
Is there any way to prevent the behavior when the modal is open, if i press the menu button of the mobile (built-in one) the modal flickers and closes temporary exposing the background view. Please see the attached url of the GIF for clarification . I am also not sure whether its a default behavior in react native or not.
https://imgur.com/LeTtNj5
Thanks in advance
This isn't so much a solution as much as it's guidance. You haven't really given enough detail to help you out properly. Best if you can share the code or setup a reduced test case at https://snack.expo.io that we can fiddle with.
That said, I'm not totally sure. This is an interesting problem, and I'm curious if you'll find a possible solution and it may depend on your implementation details. For instance, is the modal part of the navigation stack (react-navigation?) or is it an imported component? Either way, I would begin by playing with componentWillUnmount. Does it get called? If so, perhaps you can insert some black magic there to minimize the effect, but you'd first need to isolate what specifically is going on before you can hope to solve it.