{"action":"closed","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/4875","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/4875/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/4875/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/4875/events","html_url":"https://github.com/facebook/react-native/issues/4875","id":123069287,"number":4875,"title":"[Memory Leak] Animation Issue ","user":{"login":"heliumsoule","id":4875671,"avatar_url":"https://avatars.githubusercontent.com/u/4875671?v=3","gravatar_id":"","url":"https://api.github.com/users/heliumsoule","html_url":"https://github.com/heliumsoule","followers_url":"https://api.github.com/users/heliumsoule/followers","following_url":"https://api.github.com/users/heliumsoule/following{/other_user}","gists_url":"https://api.github.com/users/heliumsoule/gists{/gist_id}","starred_url":"https://api.github.com/users/heliumsoule/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/heliumsoule/subscriptions","organizations_url":"https://api.github.com/users/heliumsoule/orgs","repos_url":"https://api.github.com/users/heliumsoule/repos","events_url":"https://api.github.com/users/heliumsoule/events{/privacy}","received_events_url":"https://api.github.com/users/heliumsoule/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/facebook/react-native/labels/Icebox","name":"Icebox","color":"bfd4f2"},{"url":"https://api.github.com/repos/facebook/react-native/labels/JS","name":"JS","color":"fef2c0"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2015-12-19T07:30:25Z","updated_at":"2016-07-29T23:24:16Z","closed_at":"2016-07-29T23:24:16Z","body":"Hey guys,\r\n\r\nI'm trying to build a mobile pool game in React Native for experience and am running into problems concerning garbage collection. Right now I have ten circles that are being rendered simultaneously that bounce around the screen. However, memory consumption for the application is increasing over time and I don't know how to address this issue. \r\n\r\nIt seems like this was a React Native problem in earlier versions and I do notice falls in memory over time as shown in the graph here but in a much larger application, I am concerned that this may be issue. Has anyone else had similar issues or have solutions? \r\n\r\nThe relevant code is here and any help is greatly appreciated. Thank you!\r\n\r\n```js\r\n'use strict';\r\n\r\nvar React = require('react-native');\r\nvar Dimensions = require('Dimensions');\r\nvar screenWidth = Dimensions.get('window').width;\r\nvar screenHeight = Dimensions.get('window').height;\r\n\r\nvar {\r\n    AppRegistry,\r\n    StyleSheet,\r\n    Text,\r\n    View,\r\n    Animated,\r\n    TouchableWithoutFeedback,\r\n    ListView\r\n} = React;\r\n\r\nvar SQUARE_DIMENSIONS = 30;\r\nvar TIMING_CONFIG = {duration: 30};\r\nvar DIST_TO_EDGE = screenWidth * .39;\r\nvar startCount = 10;\r\n\r\nvar Test = React.createClass({\r\n    getInitialState: function() {\r\n        var circs = [];\r\n        for (var i = 0; i < startCount; i++) {\r\n            circs.push({\r\n                id: i,\r\n                x: 0,\r\n                y: 0,\r\n                vx: 2 + Math.random() * 2,\r\n                vy: 2 + Math.random() * 2,\r\n                dx: 0,\r\n                dy: 0,\r\n                cOb: new Animated.ValueXY({x: 0, y: 0}),\r\n            });\r\n        }\r\n\r\n        return {\r\n            circles: circs,\r\n            stop: 1\r\n        };\r\n    },\r\n    stopCircle: function() {\r\n        this.state.stop = -1 * this.state.stop;\r\n        this.setState(this.state);\r\n    },\r\n    componentDidMount: function() {\r\n        this.animateCircles();\r\n    },\r\n    animateCircles: function() {\r\n        this.triggerAnimation(this.animateCircles);\r\n    },\r\n    triggerAnimation: function(ani) {\r\n        for (var i = 0; i < this.state.circles.length; i++) {\r\n                var cCircle = this.state.circles[i];\r\n                if (cCircle.x * cCircle.x + cCircle.y * cCircle.y > DIST_TO_EDGE * DIST_TO_EDGE) {\r\n                    var prevX = cCircle.x - cCircle.vx;\r\n                    var prevY = cCircle.y - cCircle.vy;\r\n                    var exitX = (1.5 * prevX + .5 * cCircle.x) / 2;\r\n                    var exitY = (1.5 * prevY + .5 * cCircle.y) / 2;\r\n                    cCircle.x = prevX;\r\n                    cCircle.y = prevY;\r\n\r\n                    var exitRad = Math.sqrt(exitX * exitX + exitY * exitY);\r\n                    exitX = exitX * DIST_TO_EDGE / exitRad;\r\n                    exitY = exitY * DIST_TO_EDGE / exitRad;\r\n\r\n                    var twiceProjFactor = 2 * (exitX * cCircle.vx + exitY * cCircle.vy) / (DIST_TO_EDGE * DIST_TO_EDGE);\r\n                    cCircle.vx = cCircle.vx - twiceProjFactor * exitX;\r\n                    cCircle.vy = cCircle.vy - twiceProjFactor * exitY;\r\n                    break;\r\n                }\r\n        }\r\n        if (this.state.stop == 1) {\r\n            for (var k = 0; k < this.state.circles.length; k++) {\r\n                this.state.circles[k].x += this.state.circles[k].vx;\r\n                this.state.circles[k].y += this.state.circles[k].vy;\r\n            }\r\n        }\r\n        this.setState(this.state);\r\n        var animateC = [];\r\n        for (var i = 0; i < this.state.circles.length; i++) {\r\n            var currCirc = this.state.circles[i];\r\n            animateC.push(\r\n                Animated.timing(currCirc.cOb, {\r\n                    ...TIMING_CONFIG,\r\n                    toValue: {x: currCirc.x, y: currCirc.y}\r\n            }));\r\n        }\r\n        Animated.parallel(\r\n            animateC\r\n        ).start(ani);\r\n    },\r\n    getStyle: function(which) {\r\n        return [\r\n            styles.circle,\r\n            {transform: this.state.circles[which].cOb.getTranslateTransform()}\r\n        ];\r\n    },\r\n    render: function() {\r\n        return (\r\n            <View style={styles.container}>\r\n                <View style={styles.edge}>\r\n                </View>\r\n                {\r\n                    this.state.circles.map(function(c, i) {\r\n                        return (\r\n                            <TouchableWithoutFeedback key={i} onPress={this.stopCircle}>\r\n                                <Animated.View style={this.getStyle(i)} />\r\n                            </TouchableWithoutFeedback>\r\n                        );\r\n                    }, this)\r\n                }\r\n            </View>\r\n        );\r\n    },\r\n});\r\n\r\n\r\nvar styles = StyleSheet.create({\r\n    container: {\r\n        flex: 1,\r\n        flexDirection: 'column',\r\n    },\r\n    circle : {\r\n        width: screenWidth * .1,\r\n        height: screenWidth * .1,\r\n        backgroundColor: 'blue',\r\n        borderRadius: screenWidth * .1 / 2,\r\n        position: 'absolute',\r\n        left: screenWidth * .45,\r\n        top: screenWidth * .81\r\n    },\r\n});\r\n\r\nAppRegistry.registerComponent('Test', () => Test);\r\n```\r\n\r\nThe application can be found at https://github.com/heliumsoule/React-Native-Pool if you want to run the application for yourself.\r\n\r\nThank you again. "}}
{"actor":{"display_login":"mkonicek"}}