Environment
System:
- OS: Linux 4.13 Ubuntu 17.10 (Artful Aardvark)
- CPU: x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
- Memory: 4.27 GB / 15.57 GB
- Shell: 4.4.12 - /bin/bash
Binaries:
- Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
- Yarn: 1.9.4 - ~/.nvm/versions/node/v8.11.3/bin/yarn
- npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
SDKs:
- Android SDK:
- Build Tools: 23.0.1, 25.0.2, 26.0.2, 26.0.3, 27.0.3, 28.0.1
- API Levels: 23, 25, 26, 27, 28
npmPackages:
- react: 16.4.1 => 16.4.1
- react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
- create-react-native-app: 1.0.0
- react-native-cli: 2.0.1
- react-native-git-upgrade: 0.2.7
Description
Flatlist's onViewableItemsChanged prop returns the elements are being viewed by user in viewport. In a basic case, it works great. The problem comes when I try to use the Flatlist inside native-base components. For example, if I use any type of header, the number of elements returned is wrong (because the headers "go down" the list). If I use the component, all the elements are returned as viewed (all of them), thus, the prop is never updated since all the items are "always being viewed" even if they are not in viewport. However, if I replace the Flatlist with Sectionlist (with only one section), this "behavior" doesn't happens; so I think this is a bug in flatlist component.
PD. This occurs both in Android and iOS devices.
Update
This problem also occurs when I place the flatlist inside react-native's Scrollview component. And reading the native-base docs:
<Content/> is an implementation of <ScrollView/>
So, the issue of returning all the elements (even those are not in viewport) could/would be a matter of Flatlist in Scrollview.
I haven't idea what happens with the headers issue (affecting the number of elements returned).
Reproducible Demo
As the below code shows, it's just a Flatlist component inside native-base component Content and Container. When I run the app, even if there are only 4-5 items of the list in the viewport, onViewableItemsChanged returns in viewableItems array all the elements and never updates.
importReact,{Component}from'react'import{Text,View,Modal,FlatList,Dimensions,ScrollView}from'react-native'import{Container,Content,Header,Body,Title,Left,Button,Thumbnail,ListItem}from'native-base'render(){return(<Container><Headerstyle={{backgroundColor: 'white'}}><Body><Titlestyle={Style.title}>Trends</Title></Body></Header><Content><LinearGradientstart={{x: 0,y: 0.5}}end={{x: 1,y: 0.5}}colors={['#6f5ce4','#1885ef','#8ac5f6']}style={Style.linearGradient}><Textstyle={Style.header}>GET THE INSIDE SCOOP</Text><Textstyle={Style.subheader}>Watch as top designers share their latest collections.</Text></LinearGradient><View><FlatListkeyExtractor={(item,index)=>index.toString()}data={this.state.videos}contentContainerStyle={{padding: 0,margin:0,marginBottom: 20}}renderItem={({item})=><ListItemstyle={Style.listItem}thumbnail><Left><Viewstyle={Style.thumbnail}><Thumbnailstyle={Style.thumbnailImage}squaresource={{uri: item.snippet.thumbnails.default.url}}/><Iconname="play-circle-filled"size={50}tyle={Style.playIcon}/></View></Left><Bodystyle={Style.noBorder}><TextnumberOfLines={2}style={Style.videoTitle}>{item.snippet.title}</Text><Viewstyle={{flexDirection: 'row'}}><Textstyle={Style.videoCategory}>{item.snippet.channelTitle}</Text><Textstyle={Style.videoDate}notenumberOfLines={1}>{` | ${moment(item.snippet.publishedAt).fromNow()}`}</Text></View></Body></ListItem>}viewabilityConfig={this.viewabilityConfig}onViewableItemsChanged={this.onViewableItemsChanged}/></View></Content></Container>)}
Environment
System:
Binaries:
SDKs:
npmPackages:
npmGlobalPackages:
Description
Flatlist's onViewableItemsChanged prop returns the elements are being viewed by user in viewport. In a basic case, it works great. The problem comes when I try to use the Flatlist inside native-base components. For example, if I use any type of header, the number of elements returned is wrong (because the headers "go down" the list). If I use the component, all the elements are returned as viewed (all of them), thus, the prop is never updated since all the items are "always being viewed" even if they are not in viewport. However, if I replace the Flatlist with Sectionlist (with only one section), this "behavior" doesn't happens; so I think this is a bug in flatlist component.
PD. This occurs both in Android and iOS devices.
Update
This problem also occurs when I place the flatlist inside react-native's Scrollview component. And reading the native-base docs:
So, the issue of returning all the elements (even those are not in viewport) could/would be a matter of Flatlist in Scrollview.
I haven't idea what happens with the headers issue (affecting the number of elements returned).
Reproducible Demo
As the below code shows, it's just a Flatlist component inside native-base component Content and Container. When I run the app, even if there are only 4-5 items of the list in the viewport, onViewableItemsChanged returns in viewableItems array all the elements and never updates.