Skip to content

VirtualizedList uses a for..of iterator which does not work on Android #17687

New issue

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

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

Already on GitHub? # to your account

Closed
lwansbrough opened this issue Jan 20, 2018 · 3 comments
Closed
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@lwansbrough
Copy link
Contributor

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.9.2
Yarn: 0.23.2
npm: 5.5.1
Watchman: 3.5.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.51.0 => 0.51.0

Target: Android 27

Steps to Reproduce

  1. Create a VirtualizedList with items
  2. Run the app in an environment where the device's real Javascript runtime is interpreting the code (ie. not debugging in Chrome)

Expected Behavior

VirtualizedList component works

Actual Behavior

Red box.

Here's what's happening:

for..of in the ViewabilityHelper is transpiled into the following code: for (var _iterator = nextItems, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']();;) {

nextItems is a Map and thus fails Array.isArray so the code assumes the object is iterable. Android does not include an interator on Map. nextItems only contains the keys _mapData, _objectIndex, _stringIndex and _otherIndex.

The resulting error is this:

screenshot_1516482507

Such an error would not be caught by a test harness running in a Chrome runtime environment.

I believe the fix involves changing how for..of is transpiled.

@RidaRidss
Copy link

// key extractor code from utils file

keyExtractor = (item: Object, index: number) => index;

// screen

constructor(props) {
super(props);
this.state = {
onLayoutDone: false,
}
}

render() {
<View
style={{ flex: 1 }}
onLayout={e => {
if (e.nativeEvent.layout.height)
this.setState({
onLayoutDone: true
});
}}
>
{this._renderTabs()}

}

// listing is render here use above logic for render list "on layout check"

_renderTabs() {
if (this.state.onLayoutDone) {
return (
<ScrollableTabView
locked
renderTabBar={() => (

)}
>

      <FlatList
        tabLabel="My Events"
        keyExtractor={Utils.keyExtractor}
        data={this._myEvent()}
        renderItem={this.renderEventsRow}
      />

      <FlatList
        tabLabel="Requests"
        keyExtractor={Utils.keyExtractor}
        data={this.state.dataForReq}
        renderItem={this.renderRequestRow}
      />
    </ScrollableTabView>
  );
}

}

@bvaughn
Copy link
Contributor

bvaughn commented Feb 13, 2018

FWIW, a similar problem was reported against React's Fragment validator recently as well.

It has been fixed by rewriting a handful of for...of cases and adding a lint rule so they don't slip back in (facebook/react/pull/12198)

The fix will be included in 16.3 (and is in 16.3.0-alpha.1 currently)

@react-native-bot
Copy link
Collaborator

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to ContributeWhat to Expect from Maintainers

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 24, 2018
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 24, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Feb 24, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 24, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants