Questions tagged [react-native-flatlist]

A performant interface for rendering basic list in React-Native.

Filter by
Sorted by
Tagged with
0 votes
0 answers
18 views

React native - consuming too much RAM but not getting released in FlatList with large data

in a React Native project, using react query to bring infinite scroll in feeds - RAM getting consumed more and more but not releasing the memory for the component which are out of sight (starting from ...
Imthiyaz Muhammed's user avatar
0 votes
0 answers
13 views

React native FlatList last gallery item disappers after Youtube full screen

I have image/youtube video gallery in FlatList component. My code is sipmle: import { FlatList } from 'react-native'; import YoutubePlayer from 'react-native-youtube-iframe'; const productImages = [ {...
ihorko's user avatar
  • 6,875
0 votes
1 answer
25 views

trigger a function in flatlist when user swipes right the last page react native

I want to apply a functionality so that when user swipe the last page (end of chapter )of flatlist next chapter loads in flatlist and previous one gets removed . their is a function which triggers as ...
random videos's user avatar
1 vote
0 answers
38 views

How to load all messages from scrolling chat history

I have this chat screen and when I try to scroll up to you can see the scroll and it seems to be loading the messages but all I see is blank, I don't understand what's happening but it's not loading ...
Michelle 's user avatar
0 votes
0 answers
16 views

Stream Chat expo default Message List showing warning VirtualizedList: You have a large list that is slow to update

I have implemented a sample stream-chat-expo react native application using this tutorial https://getstream.io/chat/react-native-chat/tutorial/, but I have a channel with more than 100 messages and ...
Abdullah Tahir's user avatar
0 votes
1 answer
27 views

programmatically cant scroll when two nested VirtualizedLists with the same orientation

So here is the problem that i have i had a sectionList component inside a scrollView and i encountered this error <ScrollView> <HomeHeader QuickAccess={...
BHL's user avatar
  • 127
0 votes
1 answer
27 views

i am using flatList in react native to list data from server

I'm using a FlatList to fetch data from the server, but some of the content within the views is larger than the others, causing too much space around them. Does anyone have a solution for this problem?...
Mirza Herenda's user avatar
0 votes
0 answers
19 views

React native flatlist - error while rendering image from arrays

Currently, I am a student and working on a personal project - building a newspaper reading application for Android. This is not my first project, and flatlist has always played an important role in my ...
Noob tv's user avatar
  • 29
0 votes
0 answers
12 views

Change ZIndex of images in a flatlist

I am having serious problems changing the Zindex of images in my flatlist. Its works fine to start with but when I have clicked on an image, I add animation to it and it moves the images and changes a ...
JulesUK's user avatar
  • 359
1 vote
0 answers
27 views

FlatList not scrolling inside BottomSheetModal in React Native

Description: I'm facing an issue with my React Native application, where I'm using a FlatList inside a BottomSheetModal to display a list of selectable items, but the FlatList scrolling is not working ...
Gustavo Rezin's user avatar
-1 votes
1 answer
21 views

How do I make List stay on the same element when opening keyboard?

I am developing a chat app and I want the element that is directly above input stay above input when keyboard is opened. But right now, even though android keyboard shifts content, the list does not ...
Danyil Derkach's user avatar
0 votes
0 answers
28 views

Any suggestion how to use React native Flashlist to achieve magnetic scroll like the instagram explore page?

I have been trying to apply a magnetic scroll effect to the @shopify/flash-list to achieve the same behaviour of the explore page, where whenever you scroll it feel like it snap to the next post. I ...
Ben Khlifa Fahmi's user avatar
0 votes
0 answers
16 views

FlatList not scrolling (horizontal) in React-Native expo

Solved !!! Oh God, I'm trying for hours and now I got the solution. In BottomHorizontalBoxes.js styling; itemViewContainer: {}, I just changed width:'80%', to width: 200, and added marginRight: 20, ...
devhakanozdemir's user avatar
0 votes
0 answers
7 views

How can I make an element sticky in a FlatList?

I have a certain area occupied by FlatList. I need to "attach" a line of text to the bottom of a list. To 1: text was at the bottom of the list when there were few elements in the list; 2: ...
Alexander's user avatar
  • 293
0 votes
1 answer
19 views

FlatList not rendering Images

I have react native code to display list of Images of a Cart, When the user natigate to PaymentScreen, The screen should display list of Items of cart, for which I used FlatList, Before the FlatList ...
user204069's user avatar
  • 1,233
0 votes
0 answers
7 views

React native Image with no fixed size not showing in FlatList

React native Image with no fixed size not showing in FlatList But if I used it outside of the FlatList it will work fine with the original size of the image I’m using style for the image {flex:1, ...
Amr Ayman's user avatar
0 votes
0 answers
34 views

Extra padding/blank space on top of the screen when using Drawer layout from expo-router (React Native)

I'm working on a story reading React Native mobile app with expo-router. I put everything in a Drawer layout from expo-router. I noticed that there is an extra white space above the header. When I ...
Mike's user avatar
  • 1
1 vote
0 answers
55 views

Issue: FlatList rendering only few items in the list

I am trying to render a list of 1500 items using a FlatList in react-native. But it is only displaying first 5 items. I am unable to scroll down to view the remaining data. Below is the code ...
Gokul.R's user avatar
  • 11
0 votes
0 answers
24 views

Can't render items using Flatlist

I'm working on a react native app but i'm not able to render items using Flatlist Here is my code: <SafeAreaView style={{ flex: 1 }}> <AppointmentModeSwitch navigation={...
Patrícia Ferreira's user avatar
0 votes
1 answer
38 views

React-native flatlist item disappearing when changing dimensions

I'm developing a live streaming app in react-native for android. There is a director view that displays live streams from up to 3 cameramen. I'm using a FlatList to display them horizontally so that ...
JohnViande's user avatar
0 votes
1 answer
19 views

React Native Expo Vertical Scoll

trying to implement a vertical scroll view on the post section but only works if I touch the section with "what would you like to do " first is there a way to make the scroll bar visible? or ...
Damisi Babalola's user avatar
0 votes
0 answers
27 views

react-native: modal components with zIndex in Flatlist does not work

I need to popup this Edit/Delete menu modal on top of the each data raw as menu UI Used DragList as main component 'react-native-draglist' function renderItem(info) { const groupEditAndDelete = ...
sandeepa dilshan's user avatar
0 votes
0 answers
9 views

Mimic UICollectionViewFlowLayout in react native

I would like to create a list of items grouped by sections and where each section can have multiple rows with 2 items by row. If I use a FlatList, I don't get the section headers, if I use the ...
LiohAu's user avatar
  • 611
0 votes
0 answers
31 views

React Native firebase realtime database pagination with startAt

I have a realtime DB and I want to implement pagination for my FlatList. When the component mounts to display 10 recipes from db and after the user reach the end, to fetch 10 more and append to the ...
Cristian Rosca's user avatar
0 votes
1 answer
22 views

ListHeaderComponent Not Rendering

I have a ListHeaderComponent with a horizontal FlatList inside it that is not being rendered properly. (It will only render when I hot reload). Here is my code DATA FETCHING const getData = async () =&...
David Henry's user avatar
  • 1,994
0 votes
0 answers
17 views

How to handle start flatlist at determined index which items are different in height

I have a flatlist which items height are different. (I am using auto-height image that in renderItem). From previous index an index is passed to flatList that this index is initialScrollIndex of ...
BeginnerProgrammer's user avatar
0 votes
1 answer
63 views

Very slow calculation in FlatList React-native

Good day! Faced with a problem, I get an array of data from the database. In the data: 1.Name 2. I output it all to the FlatList and add small buttons - + , i.e. I want to increase and decrease each ...
Евгений Руденко's user avatar
0 votes
0 answers
17 views

Unable to append data on React native SectionList - Scroll to top when adding appending data

I have a SectionList, when i try to append data on reaches the end list moves to the 1st data. I'm using react native 0.72.3. the code is look like this. const [list, setList] = useState<...
sarath chandran's user avatar
0 votes
0 answers
82 views

Flat List inside a Gesture Detector

This code creates a custom bottomsheet and it contains a flatlist. The bottomsheet uses gesture detector to animate horizontally which fills the screen. The issue I am facing is that the as the ...
Pavithra Os's user avatar
0 votes
2 answers
24 views

SectionList data variable change to something like items in react native

How can i change the scheme for data to something like items or agents in our array that we providing to sectionList. section list accepts array like this : const DATA = [ { title: 'Main dishes', data:...
Adnan Ashraf's user avatar
0 votes
0 answers
29 views

React Native useInfiniteQuery Refresh not working as expected

I'm developing an application that has a feed of posts. I use useInfiniteQuery Hook for getting data and FlashList for show data. It's works, but I have a problem refresh the data. I want onRefresh ...
Sova's user avatar
  • 1
0 votes
0 answers
64 views

React-Native: How do I focus on a TextInput which is inside a FlatList programmatically

What I am trying to do is focus on the previous TextInput when the next is deleted. At the moment I have it working for adding items in the list by setting the autofocus to true for just that item but ...
Multiple Sources's user avatar
0 votes
0 answers
91 views

React Native Flatlist - render items partly on top of another

In my project I've built a diagram using flatlist. Each item is a bar in the diagram and when pressing a bar a popup appears displaying the bar data in text. I found this popup only overlaps one of ...
Max's user avatar
  • 73
0 votes
0 answers
13 views

Consuming API with React Native and Axios

colleagues. My issue is that when consuming a third party API with React Native and Axios, the data is returned in the console. But they are not rendered in my Flatlist. Please help me! I already ...
Hailton Wilson dos Santos's user avatar
0 votes
0 answers
36 views

How to show the horizontal List of items using Flatlist

enter image description here I am trying to show the list of categories using Flatlist but not getting the desired results. I have attached an image for ReferenceError. I have used position absolute ...
Simranjeet Kaur's user avatar
0 votes
0 answers
32 views

Retaining scroll position in flatlist in react native

I have a project which mostly uses class component and I have a flatlist in which I want to retain the scroll position after the user has navigated forward and come back later.The same thing works ...
Muhammed Ismail's user avatar
2 votes
0 answers
44 views

How can I create a Flatlist video with React Native?

I am trying to achieve this look videolist. An image and a tile then once the user click on one of them it will open a video from Youtube. Here is what I have. I do not know if I am going in the right ...
Yanel Pinto's user avatar
-1 votes
1 answer
77 views

React native - optimization on Flatlist

In my react native app, I created a screen that shows the user emojis organized by category. The emoji list contains about 800 emojis. Code below: import { StyleSheet, View, Text, ...
araraujo's user avatar
  • 613
0 votes
0 answers
27 views

Performance issues with nested Views in ScrollView and header - Replacing with FlatLists

I'm currently working on a React Native project and facing performance issues related to using nested Views within a ScrollView, along with a header. Here's an overview of the current structure: A ...
laurentgenty's user avatar
1 vote
1 answer
236 views

React Native FlashList "flickers" with state change

I am currently using FlashList to show a list of results retrieved from the device's native contact list. The idea is when you select a contact(s) there is a checkbox that appears to each contact ...
Doug Niccum's user avatar
0 votes
0 answers
57 views

Victory react native animations are not working inside Animated.FlatList when passed inside renderItem

Trying to render multiple victory charts using react native animated flatlist but the animations/transitions don't seem to be working as expected. everything else is working fine. Animations/...
Toshi Sharma's user avatar
0 votes
0 answers
16 views

Swipeable Component State Being Passed Down to Other Items in List After Removing An Item

I am creating a checkout screen with a list of checkout items. I am trying to implement a 'swipe to remove' feature for the checkout items if the user decides to delete an item from their cart. I ...
apalm's user avatar
  • 1
0 votes
0 answers
24 views

Invalid unicode escape in identifier: '\u092e\u0930\u093e'

I am getting the error enter image description here Invalid unicode escape in identifier: '\u092e\u0930\u093e' Invalid unicode escape in identifier: '\u092e\u0930\u093e' in react native run
Raj nailwal's user avatar
1 vote
1 answer
56 views

Disable horizontal scroll on screen edge in FlatList

I'm using a Drawer that slides from Left side, but when using FlatList and my content is full width and height, i can't then swipe on left screen edge to bring drawer because it just slides the ...
Marius's user avatar
  • 1,646
0 votes
1 answer
29 views

React Native how to scroll FlatList down?

I'm trying to make a chat app with React Native. My Chat Screen has a FlatList where all messages passed as data. To Scroll the FlatList I'm trying to use ref like this: const scrollRef = useRef<...
Kirill Kriachenko's user avatar
0 votes
0 answers
17 views

I'm unable to scroll horizontally in my project

I'm trying to create a story line that stacks horizontally on each other and you can scroll it horizontally from the beginning to the end but when I created it with the code below it didn't work at ...
David Josiah's user avatar
0 votes
1 answer
50 views

Cannot read property 'length' of undefined | SectionList

I am trying to populate a section list with three sections. The first two will scroll horizontally and the last will scroll vertically. I believe the only way to do this is to have a FlatList nested ...
David Henry's user avatar
  • 1,994
0 votes
2 answers
71 views

Minimize React Native Flatlist re-renders

I have a case with a Flatlist where users can scroll down to load more rows. I do not know if this is the correct way to check if components are re-rendering, but I added a log statement in the ...
user22152773's user avatar
0 votes
0 answers
37 views

FlatList won't scroll with panResponder

I've never used panResponder before and I'm pretty new to using animations in react native. I have a component with a FlatList where each item is able to move to the left using panResponder. The issue ...
pelotador.1's user avatar
0 votes
0 answers
61 views

React Native Animated Tabs & Animated Indicator using FlatList

I have followed the course on YouTube and implemented it. React Native Animated Tabs & Animated Indicator using FlatList. But i have small issue with measureLayout Source: https://www.youtube.com/...
John.D's user avatar
  • 55

1
2 3 4 5
54