-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Layout] Navigating back to scene with flexWrap + flexDirection sends CPU to 100% #1378
Comments
To narrow things down, tried a simpler layout with no ListView or ScrollView and it still happens: |
@rxb - thanks for bug report and examples, it would be ideal the example includes all code necessary to reproduce the problem - currently no mention of navigator. Additionally, if you can post it on rnplay.org - eg: https://rnplay.org/plays/NVOjJA (feel free to fork this) that would help a lot too and it makes it easy to test it across various versions |
Thanks for the help. I put together a better example here that reproduces it: If you load this example, try switching to the second tab, then back to the first, that's where the hang is. |
Thanks @rxb! That's perfect. |
Wanted to find out where this broke - 0.4.2 works, 0.4.3+ is broken. |
@brentvatne Best course of action is probably to check any changes made to facebook/css-layout as that was the original source of the issue. |
@lwansbrough - good point, do you have any time today to try that out? |
@brentvatne Yeah I can take a look in a bit |
any plans for get this fix in for 0.5? |
+1 |
Also saw this - it seems related to a regression in css-layout as mentioned above. I haven't had time yet to debug the specific issue, but testing with a newer version of Layout.c against master fixes this issue: I didn't try css-layout master which changes some core method signatures. |
Also this commit, which went into 0.4.3, could be the source of the issue: |
Nice work @jsierles, hopefully we can get this sorted for good. |
using the workaround in 1644 var Dimensions = require('Dimensions'); and then using width: windowSize.width in its parent element seems to be a good enough solution. |
I'm currently using
it was my first time using the @jaywalklabs
couldn't agree more. in bold letters :-) |
@vjeux So for now there's no plans to upgrade css-layout? |
@jsierles: yes, we need to upgrade css-layout but when we tried last time it broke our internal apps because we relied on inconsistencies with the css spec :( I don't have any date but it's certainly high on the list of things we need to do |
@jaywalklabs I ended up wrapping this hack into a component const React = require('react-native');
const {
StyleSheet,
View
} = React;
const Dimensions = require('Dimensions');
const windowSize = Dimensions.get('window');
const ScreenContainer = React.createClass({
propTypes: {
style: View.propTypes.style,
children: React.PropTypes.node
},
render() {
return (
<View style={[styles.container, this.props.style]}>{this.props.children}</View>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
width: windowSize.width
}
});
module.exports = ScreenContainer; thanks again. |
@yelled3 nice one! good work! |
I encountered this just now with The specific behaviour I was seeing:
I'm going to try the workaround wrapper @yelled3 suggests above (thanks!) but am also wondering if it's possible to implement a warning or something when these conditions exist? Looks like this has been an issue for a while and it's a real showstopper when you encounter it. By pure chance, I already had scene C working with another flow, so I was able to figure out it must have something to do with navigating from A > B > C > D in that order, and I ripped out components from all of them at random until it stopped happening. Alternatively we should really add a warning to the navigator / layout docs - happy to submit a PR if you like. |
I created an issue which is similar to this one: #2237. There's a link on the GitHub page to a sample app I created which repos the problem 100%. One point of interest, is that the CPU pegging I'm seeing is on |
also meet this issue on |
I've encountered this issue about 3 separate times now. Most of the situations, the fix mentioned above regarding window size works just fine. Unfortunately I've run into this issue now inside a row-direction parent element (embedded a couple of layers). I can't use the fix/hack for obvious reasons. +1 for fixing :( currently on 0.10.0rc. I should note that in this case, I don't think it has anything to do with navigation. It just happens when using flex direction row + wrap inside a flex direction row parent element somewhere higher up the hierarchy (not immediate ancestor in my case). |
In my case it seems that the To illustrate the problem, here's I'm seeing the following in my console:
And here's the code that prints the <Navigator
initialRoute={component.state.appStartedWithoutSiteKey ? {name: 'settingsRoute'} : {name: 'mainRoute'} }
renderScene={(route, navigator) => {
console.log('ROUTE', route)
var routes = {
'mainRoute': () => mainRoute.renderMainRoute(component.state, {
navigateToSettings: () => navigator.push({name: 'settingsRoute'})
}),
'settingsRoute': () => settingsRoute.renderSettingsRoute(component.state, {
navigateBack: navigator.getCurrentRoutes().length > 1 ? navigator.pop : undefined,
navigateToMainView: () =>
navigator.getCurrentRoutes().length > 1 ?
navigator.pop() :
navigator.push({name: 'mainRoute'})
})
}
return routes[route.name]()
}}
/> If I replace the style Maybe the problem in my case is somehow caused by the fact that the |
@laurilehmijoki - I think the problem has to do with the |
@spicyj god's work, my friend BTW, is there a way to test this so it won't reproduce somehow? |
facebook/yoga@9001a3d2 has a test already. |
Summary: Manual pick of facebook/yoga@9001a3d2 since we're still lagging behind the upstream. Fixes #1378.
@spicyj's fix has been patched into 0.10 and 0.11-rc. |
To reproduce:
Not sure if related to: #824
I first noticed while using 0.4.4. Still happening after upgrading to 0.5.0-rc
The text was updated successfully, but these errors were encountered: