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.

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

YellowBox warning when using a FlatList in a ScrollView #194

Closed
chetstone opened this issue May 22, 2020 · 4 comments
Closed

YellowBox warning when using a FlatList in a ScrollView #194

chetstone opened this issue May 22, 2020 · 4 comments
Labels

Comments

@chetstone
Copy link
Contributor

chetstone commented May 22, 2020

The example code always shows the TableView inside a ScrollView. (Except for the FlatList example on the README but this does not seem to be a complete example.) I wonder why this is necessary? When I omit the ScrollView in my code, only one Cell is rendered, the rest are not visible, even if the list is very short and would easily fit on the screen.

But if I do include ScrollView and a FlatList is included in the Table (or even outside the table but within the scrollview), I get a YellowBox warning:

VirtualizedLists should never be nested inside play ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

@chetstone
Copy link
Contributor Author

Workaround: I was able to replace the top level ScrollView with a FlatList as in the example here.
My code (it's a little more convoluted than just wrapping with ScrollView but it works):

  render: function() {
    const tableview = (
      <TableView>
        <Section
          style={styles.cellContainer}
        >
          <Cell
            key="206x"
            onPress={() => {
              this.onPress()
              });
            }}
            cellStyle="RightDetail"
            detail="Detail"
            accessory="DisclosureIndicator"
            title="Title"
          />
        </Section>
      </TableView>
    );

    return (
      <View style={{ flex: 1 }}>
        <FlatList
          style={{ width: '100%' }}
          nestedScrollEnabled
          data={['tableview', 'flatList']}
          keyExtractor={data => data}
          renderItem={({ item, index }) => {
            switch (index) {
              case 0:
                return tableview;
              case 1:
                return (
                  <MyFlatListComponent sessions={this.state.sessions} />
                );
              default:
                return null;
            }
          }}
        />
      </View>
    );
  }

@chetstone chetstone changed the title Is it required to wrap the TableView in a ScrollView? YellowBox warning when using a FlatList in a ScrollView May 22, 2020
@Purii Purii added the bug label May 23, 2020
@Purii
Copy link
Owner

Purii commented May 23, 2020

Hi @chetstone!

It shouldn't be necessary to nest the component in a ScrollView.
Will release a fix soon.

@Purii Purii closed this as completed in d82b1fc May 23, 2020
@Purii
Copy link
Owner

Purii commented May 23, 2020

Just released v3.1.0 which should fix that issue.
Can you verify that please, @chetstone?

@chetstone
Copy link
Contributor Author

Yes that fixes it! Thanks for the quick response!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants