Hello I am building an app and was wondering what the best option would be for optimizing a very large flatlist. It will take some time to load each element inside a flatlist since it contains images, a lot of text, etc. Would it be better to use just a plane flatlist or something like react-native-snap-carousel, react-native-reanimated-carousel?
What is the best option for large FlatList in react native (expo)
395 Views Asked by Srki At
2
There are 2 best solutions below
1
Rahul Dasgupta
On
If your flatlist will have large data, it is adviced to use pagination. You may use in-built Flatlist or packages like react-native-snap-carousel or react-native-reanimated-carousel. But since your data will have many images that will make the app UX slow if you load them all at once.
Better to use Pagination and use react-native-fast-image for faster loading of images via caching.
Related Questions in REACT-NATIVE
- ussd reader in Recket Native module
- I can't make TextInput to auto expand properly in Android
- expo config plugin use import instead of require
- Custom Sound for Expo Push Notifications Only Works in Foreground
- run RTK dispatch on gesture start with React Native
- Should I set Back-End for my React Native application?
- using infoPlist in app.json for expo project seems to not be working
- Anyone have success configuring react-native-home-indicator?
- KeyboardAvoidingView makes a messy the flexbox
- I am getting lots of errors when building react native app in Xcode
- Search and highlight text of current text in PDFKit Swift
- Flatlist Sometimes Capped at 10 Items Bug
- Is there any way to page transition in react native (stack navigation)
- Screen inside Stack.Navigator not visible in React-Native
- React Native stopwatch implementation slow on iOS
Related Questions in EXPO
- Expo Router does not render the child components but renders the tabs
- Expo Go crashing with on error message using Amplify Graphql to get an item
- expo config plugin use import instead of require
- Custom Sound for Expo Push Notifications Only Works in Foreground
- using infoPlist in app.json for expo project seems to not be working
- Anyone have success configuring react-native-home-indicator?
- KeyboardAvoidingView makes a messy the flexbox
- Expo Deep linking on iOS is not working (because of Google sign-in?)
- Expo Error - Android sqlite no such table
- There is a problem with the request entity - You are not allowed to create 'iOS' profile with App ID 'XXXX'
- Are there any known issues with NPM or Node.js when creating a new app?
- Published React Native Expo app to Play Store. Want to update with Flutter. How to handle signing?
- expo DocumentPicker is not selecting any document
- expo implmenting the play/pause
- expo-router replace to new page then crashes
Related Questions in FLATLIST
- How can I use flatlist for multiple sections in react native
- React Native FlatList for Chat Application to Instantly Show Latest Messages
- List users section by section on the screens React Native
- Flatlist with Absolute position is hidden behind other elements, even with zIndex
- Interpolation from reanimated doesn't work on scroll indicator from inside flatlist
- Enable FlatList bouncing iOS behavior for Android
- Improve performance of React Native FlatList
- FlatList render item absolute position
- Component inside of flatlist should block the vertical scroll on flatlist
- How to prevent React Native FlatList with TextInput inside ListHeaderComponent scroll to the top of the list on focus
- FlatList, Synced Scroll Views, and React Native
- Trouble showing fetched data on FlatList
- How to remove gap between the list items in horizontal FlatList?
- what is this warning from VirtualizedList in react native I get?
- Problem with identifying a button in a flatlist in React-Native
Related Questions in REACT-NATIVE-SNAP-CAROUSEL
- Stop scrolling in react-native-snap-carousel when end item is reached
- react-native-snap-carousel produces "TypeError: Cannot read property 'array' of undefined, js engine: hermes"
- I am struggling to get my Image to load into my Cards snap-carousel, React-Native
- Having issues importing Carousel from 'react-native-snap-carousel';
- undefined is not an object _react.PropTypes.array
- Using Components in a Carousel
- react-native-sap-carousel not working(Invariant Violation)
- What is the best option for large FlatList in react native (expo)
- React native 0.69.1 I am facing issue 'deprecated-react-native-prop-types'
- Issue with manual scrolling horizontally on react-native-snap-carousel in android
- react-native-snap-carousel, snapToItem does not move the slider to a specific position when list length is more than 15 items
- React native snap carousel no pause between slides
- How to require image in react-native
- react native snap carousel, next card preview same height
- react native import Carousel from "react-native-snap-carousel" not working
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular # Hahtags
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
Use pagination technique to show large data from flatlist. Avoid third party libraries like
react-native-snap-carousel. It may cause the issues as time passes and can also be the reason for largeapkoripasize.