Questions tagged [react-native-flatlist]
A performant interface for rendering basic list in React-Native.
2,693
questions
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 ...
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 = [
{...
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 ...
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 ...
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 ...
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={...
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?...
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 ...
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 ...
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 ...
-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 ...
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 ...
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, ...
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: ...
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 ...
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, ...
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 ...
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 ...
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={...
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 ...
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 ...
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 = ...
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 ...
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 ...
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 () =&...
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 ...
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 ...
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<...
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 ...
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:...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
-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,
...
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 ...
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 ...
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/...
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 ...
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
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 ...
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<...
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 ...
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 ...
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 ...
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 ...
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/...