I use a flatList to make my activity feed.
However, I have a problem with the fluidity of my list
Each item can render up to 80 static images of 25kb, each in an absolute view, I still have to play with the performance when I mount my components but when I scroll, if I have my 80 images per item, my list is absolutely not fluid!
However, when I check my rendering number, I have very few because I use PureComponent for my items.
I check the RAM, and everything looks good!
My UI and JS Threads are constantly at 60!
Could this be due to the number of views I see in "Perf Monitor" that goes up to more than 3000? If it's that, how do I fix it?
Hoping to have a solution,
Thank you
Viktor
I've been facing the same issue , but after reading docs ive implemented the below :
You can use the community packages (such as react-native-fast-image
from #DylanVann) for more performant images. Every image in your list
is a new Image() instance. The faster it reaches the loaded hook, the
faster your Javascript thread will be free again.
You should always use react-native-fast-image for more images.
Hope it helps. Feel free for doubts
I had issue in my android version. I set resizeMethod="resize". This gave me massive performance boost.
I was loading lot of large images in section list and FlatList. Using resizeMethod as resize resolved my issue, and scroll is buttery smooth after this.
Related
To be short, my requirements are:
The list needs to contain about 5 thousand average product cards in two columns. The products are splitted into sections.
It must be performant, really performant
I need it to work well with onViewableItemsChanged method
I need to be able to scroll it to the desired position as quick as possible
It must be able to be Animated with the native driver (e.g. to animate header according to the scroll position)
I've tried to use SectionList for my purpose, but it did not achieve the desired performance despite many tweaks of the virtualization parameters. The problem was that the responsiveness of the app gradually got worse as I scroll down. It was because of the amount of items above the viewport. Yes, SectionList do detach the items outside the viewport, but it replaces it with the getItemLayout function, which floods the thread and hangs the app for about 3-4 seconds before it starts responding.
Another way I tried was to use react-native-big-list. This thing works really well with lists like mine, like really fast, exactly how I need it to work. But sadly it is not perfect and has some unsolved issues:
the onScroll method here does not work with Animated.event with the useNativeDriver prop set to true
the onViewableItemsChanged stops working as soon as I reach the second section of the lists
the scrollToLocation method does not support the viewOffset prop.
All the issues above are known but still not resolved, and I am not as good to somehow patch them (in fact I tried)
I do hope that someone have the same problem solved.
Sorry for my mediocre English, but hopefully I expressed my thoughts good enough to be understandable
I have a CMS page which might includes goods or images floors. The images might not have a certain ratio or size.
And the product component should support adding to cart.
I'm using FlatList to render these data. But it seems like it's not a good choice cause the rendering processes quite slow and it looks like main thread will be blocked during the first rendering. And when scrolling quickly, there will be some empty blocks.
After reading the document of recyclerlistview from Flipkart, it seems like it's not a good choice for encouraging a certain layout size of each row, while images of my floors does not have.
Is there any suggestion to render such a CMS page with RN?
FlatList itself is a Slow component. It has huge gain from a memory perspective but performs slow.
Try to use https://github.com/bolan9999/react-native-largelist package for large lists, This seems to perform better for me.
#Shahen Hovhannisyan's answer is good suggestion.
But considering react-native-largelist has a lower rate and star. I did not import it in our project.
My solution is keeping use of react-native's FlatList. And wrapping items with React.memo or using PureComponent instead of Component to avoid wasted renderings. I also gave a certain layout for images. In my experience, this will increase FlatList's rendering experience. Replacing Image with react-native-fast-image is also an effective improvement. This will cause a lower memory usage and a better cache. BTW, for react-native 0.59, use react-native-fast-image 6.1.1 for the latest version only support RN 0.60+.
I'm working with a List in Office Fabric, specifically a DetailsList. Within my list, I have a number of images that are pretty expensive to render, as well as a pretty big list of rows. Unfortunately, this means when I scroll down, there's a huge lag as the page is re-rendering new images (also frustratingly because it destroys the previous images, if I scroll back up it's similarly laggy).
Is there a way to force a render of the entire list so that it doesn't have to re-render when you scroll up or down? I don't mind having a long initial loading time as long as the actual scrolling portion doesn't have a high latency/isn't slow or jerky.
You can disable virtualization by returning false in the DetailsList's onShouldVirtualize callback.
The team is actively working on improving List / DetailsList virtualization in the coming months.
Relevant documentation pages describing the above prop:
https://developer.microsoft.com/en-us/fabric#/components/detailslist
https://github.com/OfficeDev/office-ui-fabric-react/blob/738e270892f99957aecf567e4b107f8e4cf86176/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts#L253
We are doing a small mobile game with react-native. But now we are not sure if react-native is a good choice for what we wanted to create.
Our game is simply just working with tiles in a not that small "map". Lets say its 1000 x 1000 Tiles so at the end 1.000.000 Tiles.
1) Our first try was to render 1 Mio. Components - which ended bad. Even 100 x 100 is like impossible to render with react-native.
2) We ended up to add some logic which renders just tiles inside the view. But when doing any action (and new tiles get rendered) the app is laggy as hell.
3) So we made sure no Tile get ever recreated and instead we just changed props so the tile change the position instead of being recreated. This ended up also in a laggy as hell experience (even when its like 20 Tiles just changing the prop).
After these we decided that React-Native has no nice performance for what we wanted to create: A big tile map with some interactions.
4) So we were thinking of using canvas for drawing the tiles in our react-native app, but it seems that this is also not the common way. We've found some canvas packages for react-native but these are just adding a few components which are useless for our project - with these components we would also end up by rendering components like . But the goal would be to have one ref where we can use the canvas benefits.
So - if react-native is too laggy for doing stuff like this in his own way and canvas is not useable as it is in web what would be the recommended way to solve a project like this ? Or is the answer maybe that react-native is the wrong system to solve a project like this ? Any suggestions ?
IMHO, I will never recommend react-native to make a game like you are describing (with tilemap), less-UI-focused games like poker, trading cards is totally fine though.
But you are likely rendering thousands of tiles without any clipping? How about try to enable View clipping? See removeClippedSubviews here: https://facebook.github.io/react-native/docs/view.html
If you still want to push with react-native, I suggest using plugins like this: https://github.com/ProjectSeptemberInc/gl-react-native
The purpose is to have an OpenGL ES canvas to accelerate your game rendering.
Otherwise, for 2D games, cocos2d-js seems fit to you (it seems your background is javascript), although it will requires some compiler knowledge to get the game actually running on mobile device. The other solution would be Unity 3D (2D is completely find with this engine). Each engine has their own pros/cons, so I would suggest you to try both at basic level to see which one is more suitable.
I've been trying to render the entire canvas in an IWebBrowser2 control to a bitmap. IViewObject::Draw seems to be the most promising approach, but I can't get it to render anything that would requires a scroll to show. While I could automate the scrolling and stitch the images together, this would look weird with any fixed position elements. Is this even doable?
Additionally, I've tried to set the controller's size to one that would allow the entire contents to display without needing to scroll, but Windows caps the max size to the current screen resolution, so that only gets me partially there.
Any help would be much appreciated. I'm currently doing this in the context of Win7 and IE8, but I don't think that should matter much.
Sorry it took so long for me to follow up with the answer to this.
I wrote up an article detailing how to trick Windows into allowing you to resize a window larger than the virtual screen resolution, allowing functions like PrintWindow or IViewObject::Draw to capture the entire client area (i.e., the browser canvas).
http://nirvdrum.com/2010/03/25/how-to-take-full-page-or-full-canvas-screenshots-in-windows.html
An actual implementation of the technique can be found in my SnapsIE repository on GitHub (username: nirvdrum). Unfortunately I don't have enough karma to post two hyperlinks. The repository is linked from the article though.
It is very likely an IE optimisation that avoid to draw more than required. You might be able to scroll the window and call IViewObject::Draw in a loop without any animation occuring ?
I'm surprised that Windows caps the max size to the current screen resolution. Are you sure about that ?