Repository navigation
Disabling remote debugging impacts Array creation #16807
Description
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.
- 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) - run the app with remote debugging enabled, observe your view(s)
- 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.
Activity
yinghang commentedon Nov 15, 2017
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.htmlAngry-Potato commentedon Nov 23, 2017
I worked around this by not making a range like a lemon, rather just use syntactic sugar or a lib like lodash :p
jhildensperger commentedon Nov 28, 2017
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
While this seems to work fine
mvbattan commentedon Dec 6, 2017
Seems to be that there is a problem with the
spreadoperator orArray.keys().As a workaround, you could replace
[...Array(LENGTH).keys()]with:https://stackoverflow.com/a/20066663
Both get the same result:
[0, 1, 2, 3, ..., LENGTH - 1].At least it worked for me.
stale commentedon Feb 4, 2018
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 commentedon Feb 9, 2018
I can confirm that this issue still occurs in react-native 0.53.0 + android.
react-native-bot commentedon Feb 24, 2018
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 commentedon Jul 22, 2018
I'm still seeing this using
expo27.waweru-kamau commentedon Jan 8, 2019
Been trying to solve this issue for two days straight, had me refactoring my code trying to find the issue. I'm so greatful!