Inconsistent dynamic array-length rendering behavior between iOS and Android.

Is this a bug report?

Yes.

Have you read the Bugs section of the Contributing to React Native Guide?

Yes. If there is any open issue(s) related to this behavior, I must have missed it.

Environment

1. react-native -v:

react-native-cli: 2.0.1
react-native: 0.45.0

1. node -v: v7.10.0
2. npm -v: 4.2.0
3. yarn --version (if you use Yarn): 0.24.5

• Target Platform: iOS, Android

• Development Operating System: macOS 10.12.5

• Build tools: Standard.

(NOTE: Although the above is reflective of my actual environment, I also just reproduced on a fresh react-native init using RN v0.46.3).

Steps to Reproduce

1. react-native init MyNewApp

2. Embed the minimal code snippet:

  <View>
    <StatusBar hidden />
    {Array.from(Array(5).keys()).map(idx => (
      <Text key={idx}>{idx}</Text>
    ))}
  </View>

1. Run on iOS and Android separately, observe the below behavior (screenshots):

Expected Behavior

I’d expect the rendered output to be identical on both iOS and Android. Either:

• … it works on both iOS and Android.

• … it works on works on neither iOS nor Android.

Currently, it works as expected on iOS. On Android, nothing is rendered.

Although I do realize this is a relatively new language feature that may require transpilation, as I mentioned above, if it weren’t to work, I’d expect it to not work on either platform rather than the inconsistent results I’m seeing presently.

Actual Behavior

See above screenshot.

Reproducible Demo

See above code snippet.

• Specifically, the pertinent line: Array.from(Array(5).keys()).

• I’d also originally tried: [...Array(5).keys()]

Additional Context

Although I used a static (literal) numeric value in the minimal reproducible snippet above, in my actual app code, the actual value (quantity) is dynamic (depending on props).

For example, imagine the “pegs” of a paging indicator for a swipeable view, where the number of elements shown is dynamic based on some resultant API call to populate the view with data.

This ended up throwing me for a quick loop because I’d been iterating on the core business logic, visual appearance, and user interaction using the iOS simulator. Once I fired up an Android emulator (and additionally sanity-checked with an actual device), some of my dynamically-rendered screen elements (based on quantity) using the above technique weren’t showing up on Android as they were on iOS.

Just to reiterate, the reason I’m filing this bug is because the resultant behavior isn’t consistent between both platforms. If it wouldn’t have worked for either, I would’ve spent less time tracing down the issue.

[zibs]

https://snack.expo.io/rkbkRmtHb Here is a quick snack of this issue.

[facebook-github-bot]

@facebook-open-source-bot tells me to close this issue because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we’re automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

- Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
- If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
- Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.