Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flatlist's onViewableItemsChanged presents problems when using with native-base components #20914

Closed
3 tasks done
mariogarciat opened this issue Aug 29, 2018 · 3 comments
Closed
3 tasks done

Flatlist's onViewableItemsChanged presents problems when using with native-base components #20914

mariogarciat opened this issue Aug 29, 2018 · 3 comments
Labels
Platform: Linux Building on Linux. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@mariogarciat
Copy link

mariogarciat commented Aug 29, 2018 •
edited
Loading

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>
    )
  }
@react-native-bot
Copy link
Collaborator

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

@react-native-bot react-native-bot added the Ran Commands One of our bots successfully processed a command. label Sep 12, 2018
@react-native-bot
Copy link
Collaborator

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

@jbouaziz
Copy link

@mariogarciat I just ran into the same problem and fixed it by removing the Content element, it was causing the FlatList to render its entire content size instead of keeping its original frame size.

@facebook facebook locked as resolved and limited conversation to collaborators Sep 12, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Platform: Linux Building on Linux. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jbouaziz @mariogarciat @react-native-bot