All Questions
Tagged with expo react-native-flatlist
136
questions
6
votes
1
answer
12k
views
Using Animated.Flatlist and Animated.ScrollView to animate an Animated.View is not smooth
I am would like to make an animated header.
I Created an animated component of FlatList,
Used the onScroll function to update the animated value.
Placed a view (Animated.View) as the header above ...
- 5,539
5
votes
3
answers
4k
views
Keyboard opens and immediately disappears on Android
Issue: Keyboard instantly disappears when selecting input box in dynamically populated list. Only occurs when selecting an input box near the bottom of the page.
Occurs on: Android (works on ios)
...
- 61
5
votes
3
answers
5k
views
how can we make ListHeaderComponent as sticky header in SectionList?
Description
i am using horizontal tab bar inside ListHeaderComponent and I want make ListHeaderComponent as a sticky header in SectionList. we can make stickyheader in flatlist by stickyHeaderIndices={...
- 24.9k
4
votes
2
answers
2k
views
How to search a FlatList via Search Bar React Native?
I have a React Native app built via Expo and I want add a search funstion to search a FlatList using a Search Bar in React Native. The search bar bellow is from React Native Paper.
This is my code (...
- 125
4
votes
1
answer
523
views
Flatlist Items flicker and then disappear
I have a Flatlist that is supposed to represent items.
Yesterday the Flatlist worked without problems, and today it started flashing heavily when rendering and when the screen is called up again, only ...
- 41
3
votes
2
answers
8k
views
React Native FlatList extending beyond screen when rendered with a header
I'm trying to create a header that renders above a FlatList component. If the screen is 800px tall, the header is 100px tall, the FlatList should fill up 700px (with flexGrow: 1), and be scrollable (...
- 555
3
votes
2
answers
1k
views
Press on textinput hides modal react-native-modal
I am rendering Flatlist which render list of items each item have button and modal inside it when the button pressed the modal shall open, each modal have some text inputs inside it
so the hierarchy ...
3
votes
0
answers
295
views
recyclerlistview inside a scrollview
is it possible to use recyclerlistview in a ScrollView ? If yes, how it works ?
In my example it not working:
...
return (
<ScrollView style={{flex: 1}}>
<Text>Hello</Text>
...
- 123
3
votes
0
answers
139
views
Unable to render data to ReactNative FlatList on Scroll down using Http POST request
I want to render a list of items in a ReactNative FlatList, initially I am loading 15 items and then load more when user scrolls down. I am using FlatList's onEndReached prop to get new items on ...
3
votes
0
answers
1k
views
How to implement a sticky header in inverted FlatList?
I am using Flatlist to show my items in a list. Now the problem is that whenever the screen loads. It should show the last item. For this, I have used the inverted property of the Flatlist. But the ...
2
votes
1
answer
1k
views
React Native: whole FlatList rerenders on every change, even with React.memo
I've been struggling with this issue for the past couple of days: I have a list of creators stored in an array, along with another array for followed creators, but when the user 'follows' a creator ...
- 121
2
votes
1
answer
5k
views
React Native: Why does FlatList re-render completely on data changes?
thanks for reading my question! I am struggling with this problem since a few days now: My Flatlist component re-renders all items in the list every time I make a change to the underlying data.
...
- 23
2
votes
2
answers
4k
views
Flatlist maintainVisibleContentPosition causes instant crash on iOs
I have an app with only this component:
function TestComp() {
return (
<FlatList
keyExtractor={(item) => String(item)}
data={[0, 1, 2, 3]}
...
- 4,948
2
votes
1
answer
540
views
React Native combine 2 Firestore collection in one Flatlist
I have 2 collections in Firestore to do FeedScreen like this
collection users (when user register App)
users = [
avatar: '',
email: '',
name: ''
]
collection Post (when user create a post)...
2
votes
1
answer
647
views
How to autoplay expo-av video on focus in flatlist
The app I'm making consist pictures and videos sharing, and my goal is to autoplay the video once it is focused, also pauses it after it is out of the view inside the FlatList.
Here is a demo of what ...
- 428
2
votes
0
answers
491
views
How to get the Y position of list item in FlatList in ReactNative Expo Web
How can I get the Y position of list item preferably in relation to the parent in Expo app, I need to know when it becomes visible and how far did it move since it became visible if possible both on ...
- 1,482
2
votes
1
answer
3k
views
How to hide scrollbar in expo web React Native
How can I remove or style scrollbar in the expo app. When I apply overflow: scroll I get scrollbar both vertically and horizontally, I would like to remove horizontal scrollbar and style the vertical ...
- 1,482
2
votes
3
answers
929
views
React Native Flatlist Video custom Fullscreen
Has anyone here ever done a vertical video Flatlist with a button that makes the video fullscreen (not the native UI). If yes could you give some advice on how to achieve it? Should I make the video ...
- 769
2
votes
1
answer
2k
views
Expo app crashes on andriod emulator when using navigation stack
I just entered react native about a week ago and I just stumbled on this problem.
Every time I connect the navigation stack/drawer to my home app.js and then I run the expo app it shutdowns ...
- 61
2
votes
0
answers
999
views
ReactNative AnimatedComponent: null is not at object ('evaluating transform.forEach)
Im implementing a DraggablFlatlist/ Flatlist in my react native project.
That component uses react reanimated. When i run the simulator on Ios it runs fluently, however the second i switch over to ...
- 107
2
votes
0
answers
392
views
FlatList VirtualizedList: You have a large list that is slow to update
Sorry if this is somewhat a duplicate of some other post. I tried to follow the suggested solutions I could find, but I keep getting this VirtualizedList: You have a large list that is slow to update.....
- 3,277
1
vote
2
answers
2k
views
How to make expo-av video to take needed inside a flatlist?
I am developing an instagram-like app where I needed to render images/videos. I am using flatlist to prevent memory lost, and using expo-av package to render the video.
Here is a screenshot of what I ...
- 428
1
vote
2
answers
362
views
What is the best practice for pushing an AD in a Flatlist in Expo React Native
I have a Flatlist that displays post-like items (similar to Facebook posts), and all is working great, now that I have activated AdMob on my app, I want to push an ad in between the posts, for example,...
- 101
1
vote
1
answer
58
views
How to display products in Flatlist properly?
I am trying to display some fetched products in a FlatList, also to display more products when I reach the end of this FlatList, but I am getting this error: Invariant Violation: ScrollView child ...
1
vote
1
answer
1k
views
How to get Y coordinate for every element in FlatList in React Native (Expo)
I'm building UI for my app and I'd like to know the y coordinate of the element that the user clicks on in my FlatList. What causes variables I create in onLayout not to appear in onPress, and how can ...
- 345
1
vote
1
answer
959
views
React native FlatList render/display text on the same line
I am rendering a list of text in react native using FlatList and I am facing a problem, I can't render/display text on the same line, I want to display text in the form of a paragraph. By default, ...
- 107
1
vote
1
answer
837
views
react native FlatList horizontal scroll is not smooth
I am trying to implement a Flat in horizontal direction. It contains small cards contains some data. At a time 2 and half card are visible horizontally, when i scroll it directly goes to next 3 cards ...
- 393
1
vote
1
answer
2k
views
React Native Animated don't fire onScroll event in FlatList
i'm broking my head trying solving this problem.
In an Expo project i have a FlatList and onScroll event i'd like to change the Animated value, but nothing happen.
Here is my code:
import React, { ...
- 28
1
vote
2
answers
1k
views
Swipe down modal only when at the top of FlatList
I am trying to clone TikTok comments modal (see gif below) where users should be able to scroll down to view more comments and once they scroll up and reach the top, they modal will be pulled down ...
- 517
1
vote
2
answers
6k
views
Multiple FlatList wrapped in ScrollView
I'm trying to use flatlist in a global scrollview, but, I have more than 300 items to list for each FlatList. So, the screen become really slow and to push another button, I need to wait like 30 ...
1
vote
1
answer
271
views
flatlist showing type error : null is not a key
I am getting this error while trying to fetch data from React Native. Earlier it was working fine but now it is not working and I can't find out why.
<FlatList
data={this.state.favArr}
...
- 5,320
1
vote
1
answer
718
views
React native, Image not showing
so I'm very new to react native and I'm trying to create a FlashList. Seems to work fine with most elements but my images aren't really playing along.
Seems like the FlashList is importing the image ...
- 15
1
vote
2
answers
2k
views
How to get all photos on phone and show list of photos on a Flatlist in React Native
I wanted to find a library that could support getting all the photos from the phone and displaying the list of captured images on a Flatlist, and I ran this project on Expo. How to do this?
I tried ...
- 39
1
vote
1
answer
563
views
React Native Firebase trying to show images from Firebase Storage
Once I enter in the following code I receive back two different URLs for two different images within the /Images folder. I wish to display both of these but can't seem to do so in a flatlist.
Here is ...
- 85
1
vote
1
answer
4k
views
React-Native Swipe to delete
I am using react-native-gesture-handler to implement a card swiping. I don't know how to implement delete and the item is not fully swiping and deleting if i swipe it because I really need help with ...
- 478
1
vote
1
answer
876
views
How do you re-render Flatlist when value of dropdown list changes?
I am fetching an array from the database in Componentdidmount in the state variable this.state.dataSource
componentDidMount(){
fetch("http://docbook.orgfree.com/home.php", {
...
- 67
1
vote
1
answer
861
views
Getting refs to rendered videos in FlatList
I have an application where I am rendering a video component using expo-video-player via FlatList as this list could grow in the future and I want to keep things optimized as possible.
What I want ...
- 2,191
1
vote
1
answer
1k
views
How to randomly fetch from a JSON file and render it into a FlatList?
I have an app which fetch data from a JSON file. The problem is, it fetches the data from top to bottom. I want it to fetches randomly within the JSON file. How would I achieve this?
This is how I ...
- 125
1
vote
1
answer
109
views
Adding title text edit functionality to a react native flatlist
How do I add the title edit functionality to my code in the same way the ios voice memo app does it as seen in the picture below.
enter image description here
The code I have below renders a flatlist ...
- 15
1
vote
0
answers
239
views
Exception thrown while executing UI block : [RCTView updateContentSizeIfNeeded]: unrecognized selector sent to instance
I am working on a expo app and want to display a tutorial on top on the map on the first connexion, like this :
The problem is that I have this error :
I think that it comes from the FlatList inside ...
- 154
1
vote
1
answer
646
views
react-native: button not working while FlatList rendering new items
I want to render a list of product with a button to add the product to the basket when the user clicks on the button replaced with a counter to let the user selects the quantity of that product.
...
- 898
1
vote
1
answer
1k
views
React Native expo react-native-gesture-handler not working at all
I am facing this weird problem. There is simply not activity on swipe of the Swipeable element. This might be a version issue as I have seen few samples available on git that are working having a ...
- 21
1
vote
0
answers
323
views
react native flat list re-renders all items with every new item added
i have a smiple chat system that runs with express/socket io and react native with FlatList
to render the messages.
my problem is that everytime i recieve or send a message , I.E : add a message to ...
- 140
1
vote
0
answers
258
views
FlatList not showing up
I am following a tutorial video for React Native. Everything is working well besides the FlatList, I am unable to make it show up on the simulator. I am using expo, while this tutorial is done using ...
- 13
1
vote
0
answers
390
views
Set other variables don't work in onViewableItemsChanged FlatList(React Native)
I have following function:
export default function Home() {
const [value, setValue] = React.useState(0);
const onViewableItemsChanged = React.useRef((info: { viewableItems: ViewToken[], changed:...
- 11
1
vote
2
answers
564
views
React Native Flatlist renders only one row
I am pretty new to web app development so please help me out. Flatlist only renders one item on my application but returns all the records on the console.log. Below is what returns on my console.log ...
- 13
1
vote
0
answers
1k
views
How to handle onPress events for menus/lists? (Using React Native + TypeScript)
I have a screen that renders a couple of menu components and it looks all fine but for some reason my onPress functions never fires when I press the different items in the list.
I have a couple of ...
- 3,166
1
vote
0
answers
150
views
Flatlist on scroll the app cloese suddenly
I'm fetching data from an external API and for the Home, I used Flatlist and everything work well, but for my detail screen I used a horizontal Flatlist inside a ScrollView but when I tried to scroll ...
- 11
0
votes
2
answers
1k
views
FlatList not scrolling due to items not having a fixed height
I am developing an application that has a feed. I am using a FlatList to render all of the items fetched from my back end server.
This is my Flatlist:
return (
<View style={styles....
- 332
0
votes
3
answers
44
views
How to use Flatlist for navigation?
I'd tried to navigate screens via flatlist items but couldn't succeed. This is my code that gives an error. Flatlist has two element which is image, text so I want to make them for navigation to go ...
- 35