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
Related
The react native App I am building needs a feature where the user can read a six thousand word booklet within the application. I would like it to have a similar user experience to reading an E-book on the kindle or apple books app. My original plan was to convert it to EPUB and use an Epub reader component package to bring in that feature. I have yet to find a react native or expo package that is being actively maintained. That option seems like over-kill for a single small booklet.
Since I just need one fairly small booklet now and dont anticipate more than a few small booklets added in the future, I am ok with doing a little bit of adjustment to the Html to get it styled right. I have converted it from a google doc to an HTML file containing 110 <p> elements.
Do you have any suggestions on how to automatically paginate all the <p> elements so that they fit on a flexible stack of pages without scroll view?
Hello fellow programmers, i wanted to ask how can i achieve different screen rendering based on input by the user. I have done it in one way but i want to know is there any better way to do?
Attached is the link to snack on expo. You can run it and see the code of how i have done it.
If there are better alternates, please let me know.
Thankyou.
please dont mark the question as duplicate before going throught it.
For better choice you can using react-navigation https://reactnavigation.org/docs/auth-flow/ This package work in Expo
The example you posted looks mostly like something I would use conditional rendering techniques for like the && syntax
See here for more guidance:
https://reactjs.org/docs/conditional-rendering.html
If your pages are dramatically different though (not just options flipping on and off) then I would recommend react navigation as giri commented.
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.
I believe there are a bunch of questions related to this, but they are all outdated.
I'm looking for a way to render a panorama/360 picture viewer in React Native. So far, all the libraries that try to use Google's VR SDK are outdated or broken, and not usable at all.
I have also tried to use a WebView (with react-360), but web views are just way too slow, doubles RAM usage, and worst of all, can't be used to render 360 pictures stored on the device.
I guess that another option would be to grab an OpenGL library and try to implement it myself, but that's probably a lot of work if there's something made already.
We've recently published the panorama viewer we are using in our apps. Hope it can help you too. #lightbase/react-native-panorama-view
I'm looking to create a custom roadmap app using Portfolio items.
I think this will be pretty straightforward, but I would very much like to incorporate the % done bars that portfolio items have into my tables.
Since these are not part of the SDK, is it possible to get the javascript that will have the same look and feel as when the % done bars are displayed in the custom grids, along with the warnings etc for stories that don't have estimates?
I would wait on trying to re-implement the percent done bars in your custom app. We are feverishly working on the second edition of our SDK and the percent bar is currently a part of that release.
As a side note recreating the algorithm that colors the cards would be a pain and I would wait for us to complete the new SDK with the component. It is surprising how many edge cases there are in that one little bar.