Comments (9)
Sorry, I misunderstood your report.
You're saying that you're seeing this warning:
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
I thought you were getting an error generated by the grid due to a Row in Row or Col in Col situation, which is why I didn't re-open this issue.
I've made a breaking change that will fix this and simplify the grid's code (as well as giving us better performance by eliminating unnecessary re-rendering) and v0.35.0 should fix this for you. What was happening is that the Row was growing in height since it had to no fixed height specified and it was invoking onLayout due to changes in height as more cols were added, which re-renders the row. One way to solve it would have been to keep track of all the re-render requests then cancel all of them in a synchronous loop but that's just a sign of a bad design decision, so instead I've opted to make a breaking change and require use of Grid component at the top of the view hierarchy for any responsive effect to do with orientation changes. To react to changes that don't affect the Grid's frame we would use Flexbox constraints to re-layout without having to manage that from JS. I'll have some example to demonstrate that in the next minor update.
0.35.0 is now up on NPM.
from react-native-responsive-grid.
Hi @luosong
I believe I fixed it for FlatList
See this example:
code: https://github.com/idibidiart/react-native-responsive-grid#example-4
video: https://www.youtube.com/watch?v=qLqxat3wX_8
Thank you for letting me know.
Please let me know if the issue persists on your end.
The latest is v0.28.0, so please update to that and let me know. I'll close this in the next couple of days if I don't hear back.
Thanks again.
from react-native-responsive-grid.
Closing.
from react-native-responsive-grid.
I've just received this error on v0.34.2
. The Row
component is a child (albeit nested a bit) of a KeyboardAwareScrollView
component from https://github.com/APSL/react-native-keyboard-aware-scroll-view.
Can replicate the issue by scrolling a bunch
from react-native-responsive-grid.
This is a different kind of error than the one for this resolved issue. So I'll keep this one closed.
Could you please share the JSX snippet including the parent Row (and your scrollview down to the first Row descendant) ?
from react-native-responsive-grid.
So I looked at Row.js and there is no way for the error to happen unless the direct descendant (child) of a Row component is another Row component.
Maybe what happens is that the keyboard-aware scrollview component is cloning its children and returning them (to the parent row) ? I haven't looked at the code for it.
I will start another issue to produce warnings instead of an error state when rows are children of other rows or columns are children of other columns. This way you'll get a warning in DEV mode but it should work fine as long as you realize that you're doing something that you should not be doing in general...
from react-native-responsive-grid.
from react-native-responsive-grid.
I'll look into keyboard-aware-scroll-view
to see if that is the case, but I'm not sure how it could happen. The current JSX is:
<KeyboardAwareScrollView>
<View>
<Row>
{ this.props.foos.map((bar, index) => (
<Col key={index}>
//
</Col> ))
}
</Row>
</View>
</KeyboardAwareScrollView>
from react-native-responsive-grid.
Appreciate it! My fault on the initial report, I should have been clearer. I will look to implement the new changes as soon as possible to give feedback :)
Really appreciate the quick responses
from react-native-responsive-grid.
Related Issues (20)
- Question not an issue HOT 2
- Column heights and row widths HOT 1
- Errors on Column 'fullWidth' and on vAlign['stretch'] HOT 2
- Topic typo: univcersal -> universal HOT 1
- Parameterize cutoff points HOT 1
- 'Hidden' props not working HOT 1
- 'rtl' prop causes children to disappear HOT 5
- React 16.x causes exception with setState on unmounted component HOT 21
- setScreenInfo() recalculates unnecessarily HOT 6
- Bringing Pseudo Elements to RN HOT 5
- Keeping state when Grid is unmounted (for nested Grids) HOT 6
- Feature request: variable sizes HOT 9
- Uncaught TypeError: e.persist is not a function HOT 8
- How to create list of images with different sizes HOT 2
- Elements following the grid are over-writing the gird HOT 5
- web support HOT 2
- Is ImageBackground supported? HOT 1
- helpers.js uses module.exports while Column.js uses imports HOT 10
- Support typescript? HOT 1
- diffrent sizes grid doesn't work good HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-responsive-grid.