I am trying to build a contact list in react native. I don't do all the possible optimization that are mentioned in the following mentioned places.
React native flat list optimization
8 ways to optimize React native FlatList performance
how-to-optimize-your-react-native-flatlist
How did I optimize my React Native FlatList?
flatlist-performance-tips
react-native-optimized-flatlist
I have tried all these one by one. by flat list is too much smooth now. but the only problem is that it takes some time to load initially. I want it like the contact book how has no loading. her ei ma attaching video link how it is behaving.
my own flat list source code
Video
** anyone who can help me to resolve this. I am tired of this and now this becomes a headache for me. help will be really appreciated. ia m trying on this for one month but invain.**
Take a look at the docs specifically about the attributes maxToRenderPerBatch,updateCellsBatchingPeriod and removeClippedSubviews. In your case, it's rendering 50 items per batch of render, the updateCellsBatchingPeriod maybe is making the list update itself longer than expected and maybe if you set the prop removeClippedSubviews to true the list is going to stay fluid as you want.
Related
For school, I have to make my first app with React Native. It's a family tree app; my teacher said it's the best choice to make that with all View-elements, even the lines between family members. But I think that won't ever be possible to calculate all distances perfectly.
Isn't there any other way to make this kind of app?
I think you are right and you need to take something like https://github.com/software-mansion/react-native-svg
With SVG you can draw shapes and arrows to connect your tree items.
For React exists a beautiful library called https://reactflow.dev. Unfortunately, it is a Web-only solution, but you can check how they render trees and repeat it in RN.
Also, read this article about storing tree data in JS https://medium.com/#iampika/javascript-trees-b8f3b4261c3a it should be helpful.
I'm working on a react-native app and I'd like to create a list of images and videos like TikTok, so it could be really long.
I've already followed the instructions for improving performances, but the lag still exists, therefore I've spotted some libraries that could solve the lag:
react-native-big-list
recyclerlistview
Any suggestions to create an improved performance FlatList.
Thank you
Please post here code how you are rendering your <FlatList />, maybe there are two many re-renders or you are using too heavy components inside.
There are couple of things that can improve performance
use https://github.com/DylanVann/react-native-fast-image for displaying thumbnails. This is must have solution if you are rendering list with images inside.
decrease amount of transparent views
use hermes on android (and on iOS too for latest RN)
check this doc https://reactnative.dev/docs/next/optimizing-flatlist-configuration
I need to show data in graphical representation like stock app in itunes.
There are many libs but I cant find one giving such functionalities.
Can Any body suggest how to implement.
Try using React-native-svg-charts
which you can control size and colors
here is an Example
I want to create a scroll that repeats itself, again and again, i.e. when I keep scrolling to the top I reach the last row and when I scroll to the bottom I reach the first row again.
I have tried searching components for the same, but the best I could find were these -
react-native-infinite-scroll and this stackoverflow answer but both of them only tell about how can I load more data when I reach the ScrollView or ListView end.
I searched a lot for this type component but couldn't find any, so I created my own component from scratch using FlatList, and also published it to npm, so anyone can install it using
npm install react-native-infinite-looping-scroll
in your react native project directory.
The component is still in beta so don't expect very good performance from it. But the component is still pretty basic and there's a lot of scope for improvement so anyone who wants to contribute to it can submit a PR here.
I tried to find tree view select in react native, But, I couldn't find any. I also tried to generate my own, but it will take more time to develop and need to fix many things that I can't do right now.
Can anybody provide inputs on which library or component use for tree multi-select inputs?
Thank you in advance.