Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
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.
import React, {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>
<Header
style={{backgroundColor: 'white'}}>
<Body>
<Title style={Style.title}>Trends</Title>
</Body>
</Header>
<Content >
<LinearGradient
start={{x: 0, y: 0.5}} end={{x: 1, y: 0.5}}
colors={['#6f5ce4', '#1885ef', '#8ac5f6']}
style={Style.linearGradient}>
<Text style={Style.header}>GET THE INSIDE SCOOP</Text>
<Text style={Style.subheader}>Watch as top designers share their latest collections.</Text>
</LinearGradient>
<View >
<FlatList
keyExtractor={(item, index) => index.toString()}
data={this.state.videos}
contentContainerStyle={{padding: 0, margin:0, marginBottom: 20}}
renderItem={({item}) =>
<ListItem style={Style.listItem} thumbnail>
<Left>
<View style={Style.thumbnail}>
<Thumbnail style={Style.thumbnailImage} square source={{ uri: item.snippet.thumbnails.default.url }} />
<Icon name="play-circle-filled" size={50} tyle={Style.playIcon} />
</View>
</Left>
<Body style={Style.noBorder}>
<Text numberOfLines={2} style={Style.videoTitle}>{item.snippet.title}</Text>
<View style={{flexDirection: 'row'}}>
<Text style={Style.videoCategory}>{item.snippet.channelTitle}</Text>
<Text style={Style.videoDate} note numberOfLines={1}>{` | ${moment(item.snippet.publishedAt).fromNow()}`}</Text>
</View>
</Body>
</ListItem>
}
viewabilityConfig={this.viewabilityConfig}
onViewableItemsChanged={this.onViewableItemsChanged}
/>
</View>
</Content>
</Container>
)
}