Disabling remote debugging impacts Array creation

[Angry-Potato]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Linux 4.10
Node: 8.6.0
Yarn: 1.1.0
npm: 5.3.0
Watchman: 4.9.0
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3

Target Platform: Android

Steps to Reproduce

Enabling or disabling remote debugging on android seems to impact a specific Array creation method.

1. use the following method of array creation and mapping in a render function to create a list of 2 views [...Array(2).keys()].map(i => create a view)
2. run the app with remote debugging enabled, observe your view(s)
3. disable remote debugging, observe your view no longer renders as the array is empty.

Expected Behavior

I expected [...Array(2).keys()] to evaluate exactly the same whilst debugging or not.

Actual Behavior

I used the above array creation method to spawn animations at differing frequencies. I noticed that the animation would not render on android if remote debugging was disabled. I tried adding the perspective style prop, as advised in the docs, but to no avail. I also tried using native driver for animations, and of course also tried not using native driver. Eventually, I tracked the issue down to the simple array creation not evaluating correctly if remote debugging is disabled.
The issue does not appear to affect iOS.

Reproducible Demo

The bug is reproducible with the following component, just stick it in a react native app somewhere.

const SQUARE_COUNT = 50;
const arr = [];
for (var i = 0; i < 50; i++) {
  arr.push(i);
}

const styleas = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  }
});
class Animations extends Component {
  constructor() {
    super();
    this.animatedValue = [];
    arr.forEach(value => {
      this.animatedValue[value] = new Animated.Value(0);
    });
  }

  componentDidMount() {
    this.animate();
  }

  animate() {
    const animations = arr.map(item => {
      return Animated.timing(this.animatedValue[item], {
        toValue: 1,
        duration: 5000
      });
    });
    Animated.stagger(10, animations).start();
  }

  render() {
    const animations = [...Array(SQUARE_COUNT).keys()].map((a, i) => {
      return (
        <Animated.View
          key={i}
          style={{
            opacity: this.animatedValue[a],
            height: 20,
            width: 20,
            backgroundColor: 'red',
            marginLeft: 3,
            marginTop: 3
          }}
        />
      );
    });
    return <View style={styleas.container}>{animations}</View>;
  }
}

by default, remote debugging is disabled so initially the animation will not render. If you enable remote debugging, you should see the animation appear.

[yinghang]

What are you trying to achieve here with [...Array(SQUARE_COUNT).keys()]? Also the Chrome debugger runs on a different runtime so you might want to take that into account. Check this out: https://facebook.github.io/react-native/docs/javascript-environment.html

[Angry-Potato]

I worked around this by not making a range like a lemon, rather just use syntactic sugar or a lib like lodash :p

[jhildensperger]

I just has the same issue

Environment:

OS: macOS Sierra 10.12.6
Node: 8.9.1
Yarn: Not Found
npm: 5.5.1
Watchman: 4.7.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: 0.49.3 => 0.49.3

Target Platform: Android

This does not work

const headers = [...Array(this.props.numHeaders).keys].map((i) => { 
    return `Header ${i + 1}`; 
});

While this seems to work fine

const headers = Array.from(new Array(this.props.numHeaders), (_, i) => {
    return `Header ${i + 1}`; 
});

[mvbattan]

Seems to be that there is a problem with the spread operator or Array.keys().

As a workaround, you could replace [...Array(LENGTH).keys()] with:

Array.apply(null, { length: LENGTH }).map(Number.call, Number)

https://stackoverflow.com/a/20066663

Both get the same result: [0, 1, 2, 3, ..., LENGTH - 1].

At least it worked for me.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[phazor]

I can confirm that this issue still occurs in react-native 0.53.0 + android.

[react-native-bot]

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 Contribute • What to Expect from Maintainers}

[leethree]

I'm still seeing this using expo 27.

[waweru-kamau]

Seems to be that there is a problem with the spread operator or Array.keys().

As a workaround, you could replace [...Array(LENGTH).keys()] with:

Array.apply(null, { length: LENGTH }).map(Number.call, Number)

https://stackoverflow.com/a/20066663

Both get the same result: [0, 1, 2, 3, ..., LENGTH - 1].

At least it worked for me.

Been trying to solve this issue for two days straight, had me refactoring my code trying to find the issue. I'm so greatful!