Summary:
This fixes measuring of items in the main axis of a container. Previously items were in a lot of cases measured with UNSPECIFIED instead of AT_MOST. This was to support scrolling containers. The correct way to handle scrolling containers is to instead provide them with their own overflow value to activate this behavior. This is also similar to how the web works.
This is a breaking change. Most of your layouts will continue to function as before however some of them might not. Typically this is due to having a `flex: 1` style where it is currently a no-op due to being measured with an undefined size but after this change it may collapse your component to take zero size due to the implicit `flexBasis: 0` now being correctly treated. Removing the bad `flex: 1` style or changing it to `flexGrow: 1` should solve most if not all layout issues your see after this diff.
Reviewed By: majak
Differential Revision: D3876927
fbshipit-source-id: 81ea1c9d6574dd4564a3333f1b3617cf84b4022f
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.
Reviewed By: astreet
Differential Revision: D3855801
fbshipit-source-id: 3c365f9e6ef612fd9d9caaaa8c650e9702176e77
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.
Reviewed By: astreet
Differential Revision: D3855801
fbshipit-source-id: 6077b0bcb68fe5ddd4aa22926acab40ff4d83949
Summary:
When an absolutely positioned node appeared inside an overflow:hidden
parent, we were limiting its height. This is inconsistent with how
layout behaves on the web.
Closes https://github.com/facebook/css-layout/pull/218
Reviewed By: lucasr
Differential Revision: D3797285
Pulled By: emilsjolander
fbshipit-source-id: 98f98e77aa26edce86b9882c1cac284799b69a27
Summary: Some new csslayout deps were added that were not properly synced to open source.
Reviewed By: bestander
Differential Revision: D3670567
fbshipit-source-id: 6890aabd2eff9dadf9b33a8b44bedc6947a8525e
Summary:
The make current RCTShadowView support RTL layout.
1 Change all left/right to start/end for margin, padding, boarder and position
2 Calculate position in the same way as margin, padding and boarder
Reviewed By: fkgozali
Differential Revision: D3619292
fbshipit-source-id: eaaa6faeee93c964d59bb6f498d89effc09ed567
Summary:
The current CSSLayout can't support RTL because wrong calculation for absolute position.
This change is mainly to fix the issue: https://github.com/facebook/css-layout/issues/197
Three main problems I fixed:
1. Calculate the position in the same way as margin, boarder, and padding. So that to fix the absolute problem.
2. Fix one wrong calculation for leading value when we only know the trailing value. It was hard code for the LTR situation. Now I changed it to depends on the main Axis.
3. Expose getter and setter function for RN to read layout direction and start/end position value.
Reviewed By: fkgozali
Differential Revision: D3616949
fbshipit-source-id: ae7a47cc0a5d02b42b95f87232be51ab144056d9
Summary:
https://github.com/facebook/css-layout/pull/199
- Nodes were measured with the assumption of being text nodes (height depends on width) when determining flex basis. This is not always true. Even when we are just interested in the main axis (flex basis) we need to correctly constrain the cross axis.
- Some tests were wrong. Measuring texts.big and expecting it to have textSizes.smallHeight which doesn't make a lot of sense.
Reviewed By: vjeux
Differential Revision: D3510163
fbshipit-source-id: ee53b548dd078005fdd153d279e4c7fef3dd02d0
Summary:
https://github.com/facebook/css-layout/pull/200
Make use of max dimension styles to allow root to be measured with AT_MOST measure mode
Reviewed By: IanChilds
Differential Revision: D3513505
fbshipit-source-id: 169f49717e896eb6270b52fb7115ce005aa0e3a8
Summary:Remove Trailing Spaces.
Why:
Sometimes there are conflicts with trailing spaces
Saves space
Those whose tools automatically delete them will have their pr watered down with trailing space removal
Closes https://github.com/facebook/react-native/pull/6787
Differential Revision: D3144704
fb-gh-sync-id: d8a62f115a3f8a8a49d5b07f56c540a02af38cf8
fbshipit-source-id: d8a62f115a3f8a8a49d5b07f56c540a02af38cf8
Summary:Update to latest master version of css-layout. Update integration in RCTShadow(Root)View to match.
This solves the issue with items not strechting vertically in column layouts (https://github.com/facebook/css-layout/issues/127)
Reviewed By: vjeux
Differential Revision: D3120699
fb-gh-sync-id: beba162e1255d3527e1160e9bd414a712cb10713
fbshipit-source-id: beba162e1255d3527e1160e9bd414a712cb10713
Emil Sjolander
Adam Comella
Lucas Rocha
Mengjue Wang
Pieter De Baets
Nick
Jason Sendros
Martin Konicek
Martin Kralik
Krzysztof Magiera
Felix Oghină