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.