react-native-flatlist

React Native FlatList returned from a function or const rerenders from the top when an item is interacted with

百般思念 提交于 2020-06-28 04:15:11
问题 I'm trying to put a flatlist checklist into a react native tab view, to do that you need to declare the flatlist as a const so it can be used like . Unfortunately whenever I click on an item at the bottom of the list it pops back to the top and rerenders the list. This problem doesn't occur when a flatlist is rendered directly into your components render function. I've made a simplified version of what I mean. https://snack.expo.io/ecO7YYlVZ Is the version where clicking an item pops to the

Fixed footer in react native with FlatList

不羁的心 提交于 2020-06-27 09:26:29
问题 Following this question on fixed footer with a ScrollView, I'm trying to implement a fixed footer on the screen with a FlatList. I have tried to use the answer provided by putting the flat list inside a view, but then none of the items are rendered. Does any one know how to implement a fixed footer with a flat list as the other main element of component? 回答1: Using this flex solution I managed to do it with a couple of nested Views: <View style={{flex: 1}}> <View style={{flex: 0.9}}>

why scrollbar resting on top in react native infinite scrolling using react-native-tab-view

谁说胖子不能爱 提交于 2020-06-17 04:20:33
问题 I'm using react-native-tab-view in my App in which I have 2 tabs. I am loading Tab data via API call for creating infinite scroll pagination in side Tab , when data is concatenating in my FlatList data from API then each time my scroll bar reset to top position . I currently have snack demo like so: https://snack.expo.io/@luckyamit/9905d4 I don't want to reset my scroll bar on top in each API call i have search a lot for this issue but not find my solution. can any one help me to resolve my

Dynamically changing number of columns in React Native Flat List

限于喜欢 提交于 2020-06-11 17:08:08
问题 I have a FlatList where I want to change the number of columns based on orientation. However, I get the red screen when I do this. As per the red screen error message, I'm not quite sure how I should be changing the key prop. Any help is appreciated. // dynamically changing number of columns const numCols = orientation === constants.PORTRAIT ? 3 : 8 <FlatList keyExtractor={(_, i) => i} numColumns={numCols} // assigning the number of columns horizontal={false} renderItem={({ item }) =>

File cannot open after download on Android

自古美人都是妖i 提交于 2020-05-17 06:40:21
问题 I have used rn-fetch-blob to fetch api and download a video, the video is getting downloaded successfully however, when I try to open the file, it shows me :'file cannot open', it is a mp4 format, and is running otherwise, I have checked the file separately. Below is the download function: download = async (item) => { console.log(item) const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE) if (granted === PermissionsAndroid.RESULTS.GRANTED) {

React Native “keyboardDismissMode” at FlatList

ⅰ亾dé卋堺 提交于 2020-05-15 10:37:39
问题 Is there any possibility to prevent the keyboard from dismissing when scrolling a FlatList ? When using a ScrollView setting the prop "keyboardDismissMode" to "none" is the solution to this problem, but this doesn't work for me at a FlatList... I use the FlatList inside a self-made component, that is in a Stack-Navigator, while there is a focussed TextInput in its header. I render the FlatList like this: <View style={{flex: 1}}> <FlatList style={{flex: 1}} data={this.props.data} keyExtractor=

React Native “keyboardDismissMode” at FlatList

心不动则不痛 提交于 2020-05-15 10:37:26
问题 Is there any possibility to prevent the keyboard from dismissing when scrolling a FlatList ? When using a ScrollView setting the prop "keyboardDismissMode" to "none" is the solution to this problem, but this doesn't work for me at a FlatList... I use the FlatList inside a self-made component, that is in a Stack-Navigator, while there is a focussed TextInput in its header. I render the FlatList like this: <View style={{flex: 1}}> <FlatList style={{flex: 1}} data={this.props.data} keyExtractor=

React Native (Redux) FlatList jumping to top of list when onEndReached called

﹥>﹥吖頭↗ 提交于 2020-05-13 06:03:23
问题 I have a FlatList in ReactNative which pulls a list of articles from an API. When the end of the list is reached on scrolling, a further page of articles is pulled from the API and appended to the articles list in a Redux reducer. The FlatList is set up as: render() { return( <FlatList data={this.props.articles.articles} // The initial articles list via Redux state renderItem={this.renderArticleListItem} // Just renders the list item. onEndReached={this.pageArticles.bind(this)} // Simply

Drag and Drop between two draggable Flatlist-React Native

回眸只為那壹抹淺笑 提交于 2020-05-10 21:16:31
问题 I'm struggling to create a requirement for my React-Native application where I am having a blank dropbox(on dropping a flatlist item it should convert into a draggable flatlist) and a draggable flatlist from where I have to drag and drop to the blank dropbox and vice-versa. The items in both the flatlists should have a right side menu on click to which should show a option to move to the item to the other flatlist. I know it's a very common scenario but as I'm quite new to React-Native so I

Drag and Drop between two draggable Flatlist-React Native

眉间皱痕 提交于 2020-05-10 21:15:02
问题 I'm struggling to create a requirement for my React-Native application where I am having a blank dropbox(on dropping a flatlist item it should convert into a draggable flatlist) and a draggable flatlist from where I have to drag and drop to the blank dropbox and vice-versa. The items in both the flatlists should have a right side menu on click to which should show a option to move to the item to the other flatlist. I know it's a very common scenario but as I'm quite new to React-Native so I