Flex Layout - minWidth property is always used even if more space is available in RN 0.42 #12878

brianfoody · 2017-03-12T08:42:43Z

Description

If I have a View with flexDirection row and three children with flex 1 I would expect them to fill up all the space of the parent. However if I add a minWidth property to the child views the minWidth is used and leftOver

Reproduction

https://github.com/brianfoody/react-native-min-width-issue

None of the red view should be displayed as the children should take up all available space

Solution

Sorry I'm not familiar with the underlying layout engine. I'm guessing this is related to the switch to Yoga and possibly percentage width support.

Additional Information

React Native version:0.42.0
Platform: iOs
Operating System: MacOS
Dev tools: xCode 8.2.1, Simulator 10 and iPhone 6s 10.2

sckoh · 2017-04-15T08:23:30Z

+1

see facebook/react-native#12878

guiherzog · 2017-07-20T16:43:21Z

+1

hramos · 2017-09-21T15:14:24Z

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

pedro · 2018-01-16T05:49:26Z

fwiw I'm also running into this issue on 0.45 – seem to be fixed in 0.52.

Summary: This sync includes the following changes: - **[ae14317d6](facebook/react@ae14317d6)**: Inline fbjs/lib/emptyFunction (#13054) //<Dan Abramov>// - **[72434a768](facebook/react@72434a768)**: Remove or inline some fbjs dependencies (#13046) //<Dan Abramov>// - **[64c54edea](facebook/react@64c54edea)**: Adding movementX and movementY to synthenticMouseEvent fixes #6723 (#9018) //<Jason Williams>// - **[9bd4d1fae](facebook/react@9bd4d1fae)**: Synchronously restart when an error is thrown during async rendering (#13041) //<Andrew Clark>// - **[9bda7b28f](facebook/react@9bda7b28f)**: Suspended high pri work forces lower priority work to expire early (#12965) //<Andrew Clark>// - **[2e7577907](facebook/react@2e7577907)**: Fix incorrect data in compositionend event with Korean IME on IE11 (#10217) (#12563) //<Crux>// - **[bc963f353](facebook/react@bc963f353)**: setJSResponder in Fabric renderer (#13031) //<Sebastian Markbåge>// - **[051637da6](facebook/react@051637da6)**: Extract Fabric event handlers from canonical props (#13024) //<Sebastian Markbåge>// - **[2a8085980](facebook/react@2a8085980)**: Remove rAF fork (#12980) //<Flarnie Marchan>// - **[e0c78344e](facebook/react@e0c78344e)**: Retry on error if there's lower priority pending work (#12957) //<Andrew Clark>// - **[9725065eb](facebook/react@9725065eb)**: Update bundle sizes for 16.4.1 release //<Dan Abramov>// - **[0b87b2790](facebook/react@0b87b2790)**: Updating package versions for release 16.4.1 //<Dan Abramov>// - **[036ae3c6e](facebook/react@036ae3c6e)**: Use native event dispatching instead of Simulate or SimulateNative (#13023) //<Philipp Spieß>// - **[945fc1bfc](facebook/react@945fc1bfc)**: Call gDSFP with the right state in react-test-render (#13030) //<Rafał Ruciński>// - **[392530104](facebook/react@392530104)**: Remove feature flag around 'getDerivedStateFromProps' bug fix (#13022) //<Flarnie Marchan>// - **[1594409fa](facebook/react@1594409fa)**: Scheduler depends on common packages (#13020) //<Dan Abramov>// - **[d5c11193e](facebook/react@d5c11193e)**: Added production profiling bundle type (#12886) //<Brian Vaughn>// - **[ec60457bc](facebook/react@ec60457bc)**: Popping context is O(1) in SSR (#13019) //<Dan Abramov>// - **[30bc8ef79](facebook/react@30bc8ef79)**: Allow multiple root children in test renderer traversal API (#13017) //<Dan Abramov>// - **[d480782c4](facebook/react@d480782c4)**: Don’t error when returning an empty Fragment (#12966) //<Philipp Spieß>// - **[4ac6f133a](facebook/react@4ac6f133a)**: Fallback to event.srcElement for IE9 (#12976) //<Nathan Hunzaker>// - **[23be4102d](facebook/react@23be4102d)**: Fixed an issue with nested contexts unwinding when server rendering. Issue #12984 (#12985) //<Eric Soderberg>// - **[d0d428064](facebook/react@d0d428064)**: Remove old reference to inst._wrapperState (#12987) //<Nathan Hunzaker>// - **[c78957eac](facebook/react@c78957eac)**: Fix an SVG focusing crash in IE11 (#12996) //<Jifa Jiang>// - **[bfb12ebb5](facebook/react@bfb12ebb5)**: delete a couple of redundant lines in performWorkOnRoot() in ReactFiberScheduler.js (#13003) //<Nathan Quarles>// - **[394b17eed](facebook/react@394b17eed)**: Update custom renderer docs //<Dan Abramov>// - **[188c4252a](facebook/react@188c4252a)**: Fix react-dom ReferenceError requestAnimationFrame in non-browser env (#13000) (#13001) //<Ivan Babak>// - **[9cf3733a9](facebook/react@9cf3733a9)**: update comment in computeAsyncExpiration() to reflect code (#12994) //<Nathan Quarles>// - **[c5a733e1e](facebook/react@c5a733e1e)**: Fix links of docs on the comment (#12795) //<Ende93>// - **[36546b513](facebook/react@36546b513)**: Set the correct initial value on input range (#12939) //<Maxime Nory>// - **[15767a8f8](facebook/react@15767a8f8)**: [scheduler] 5/n Error handling in scheduler (#12920) //<Flarnie Marchan>// - **[3118ed9d6](facebook/react@3118ed9d6)**: Expose unstable_interactiveUpdates on ReactDOM (#12943) //<Andrew Clark>// - **[524a74331](facebook/react@524a74331)**: Fix for Flow issues in SimpleCacheProvider (#12942) //<Flarnie Marchan>// - **[ae57b125c](facebook/react@ae57b125c)**: [simple-cache-provider] Use LRU cache eviction (#12851) //<Andrew Clark>// - **[e0a03c1b4](facebook/react@e0a03c1b4)**: Extend input type check in selection capabilities (#12062) (#12135) //<Spyros Ioakeimidis>// - **[79a740c6e](facebook/react@79a740c6e)**: Rename variables to remove references to 'global' global (#12931) //<Flarnie Marchan>// - **[ff724d3c2](facebook/react@ff724d3c2)**: [scheduler] 4/n Allow splitting out `schedule` in fb-www, prepare to fix polyfill issue internally (#12900) //<Flarnie Marchan>// - **[83f76e4db](facebook/react@83f76e4db)**: ForwardRefs supports propTypes (#12911) //<Brian Vaughn>// - **[8aeea5afa](facebook/react@8aeea5afa)**: Do not assign node.value on input creation if no change will occur (#12925) //<Nathan Hunzaker>// - **[aa85b0fd5](facebook/react@aa85b0fd5)**: Upgrade to Jest 23 (#12894) //<Simen Bekkhus>// - **[61777a78f](facebook/react@61777a78f)**: [scheduler] 3/n Use a linked list instead of map and queue for callback storage (#12893) //<Flarnie Marchan>// - **[e7bd3d59a](facebook/react@e7bd3d59a)**: No longer expose ReactNativeComponentTree (#12904) //<Sebastian Markbåge>// - **[f35d989be](facebook/react@f35d989be)**: TestRenderer warns if flushThrough is passed the wrong params (#12909) //<Brian Vaughn>// - **[557870067](facebook/react@557870067)**: Record "actual" times for all Fibers within a Profiler tree (alt) (#12910) //<Brian Vaughn>// - **[76e07071a](facebook/react@76e07071a)**: [scheduler] 2/n Adding 'schedule' fixture (#12884) //<Flarnie Marchan>// - **[345e0a71a](facebook/react@345e0a71a)**: Improve tests for 'schedule' module (#12880) //<Flarnie Marchan>// - **[8765d6089](facebook/react@8765d6089)**: Update bundle sizes for 16.4.0 release //<Andrew Clark>// - **[d427a563d](facebook/react@d427a563d)**: Updating package versions for release 16.4.0 //<Andrew Clark>// - **[53852a887](facebook/react@53852a887)**: add functional components warning about legacy context api (#12892) //<Chang Yan>// - **[fe747a51c](facebook/react@fe747a51c)**: Add React.Timeout to getComponentName (#12890) //<Toru Kobayashi>// - **[c601f7a64](facebook/react@c601f7a64)**: add siblings Timeout components test case (#12862) //<Chang Yan>// - **[735035837](facebook/react@735035837)**: add legacy context API warning in strict mode (#12849) //<Chang Yan>// - **[e88579184](facebook/react@e88579184)**: Fix a regression that caused us to listen to extra events at the top (#12878) //<Dan Abramov>// - **[7c0aca289](facebook/react@7c0aca289)**: Rollup freeze: false (#12879) //<Brian Vaughn>// - **[33289b530](facebook/react@33289b530)**: Tests and fixes for 'timing out' behavior (#12858) //<Flarnie Marchan>// - **[ad27845cc](facebook/react@ad27845cc)**: Fix double-firing submit events (#12877) //<Sophie Alpert>// - **[dd5fad296](facebook/react@dd5fad296)**: Update Flow to 0.70 (#12875) //<Dan Abramov>// - **[13003654e](facebook/react@13003654e)**: Pass "start time" and "commit time" to Profiler callback (#12852) //<Brian Vaughn>// - **[dc3b144f4](facebook/react@dc3b144f4)**: Treat Rollup "warnings" as errors (#12868) //<Dan Abramov>// - **[d7b9b4921](facebook/react@d7b9b4921)**: Fix react native example links in README of 'react-reconciler' (#12871) //<Kevin (Kun) "Kassimo" Qian>// - **[9bed4a6ae](facebook/react@9bed4a6ae)**: https in reactProdInvariant text (#12869) //<Sophie Alpert>// - **[47b003a82](facebook/react@47b003a82)**: Resolve host configs at build time (#12792) //<Dan Abramov>// Release Notes: [GENERAL] [FEATURE] [React] - React sync for revisions c0fe8d6...ae14317 Reviewed By: bvaughn Differential Revision: D8458731 fbshipit-source-id: afefaa50685d43e70c8ea85c70d2e29dee311cbb

Summary: This sync includes the following changes: - **[ae14317d6](facebook/react@ae14317d6)**: Inline fbjs/lib/emptyFunction (facebook#13054) //<Dan Abramov>// - **[72434a768](facebook/react@72434a768)**: Remove or inline some fbjs dependencies (facebook#13046) //<Dan Abramov>// - **[64c54edea](facebook/react@64c54edea)**: Adding movementX and movementY to synthenticMouseEvent fixes facebook#6723 (facebook#9018) //<Jason Williams>// - **[9bd4d1fae](facebook/react@9bd4d1fae)**: Synchronously restart when an error is thrown during async rendering (facebook#13041) //<Andrew Clark>// - **[9bda7b28f](facebook/react@9bda7b28f)**: Suspended high pri work forces lower priority work to expire early (facebook#12965) //<Andrew Clark>// - **[2e7577907](facebook/react@2e7577907)**: Fix incorrect data in compositionend event with Korean IME on IE11 (facebook#10217) (facebook#12563) //<Crux>// - **[bc963f353](facebook/react@bc963f353)**: setJSResponder in Fabric renderer (facebook#13031) //<Sebastian Markbåge>// - **[051637da6](facebook/react@051637da6)**: Extract Fabric event handlers from canonical props (facebook#13024) //<Sebastian Markbåge>// - **[2a8085980](facebook/react@2a8085980)**: Remove rAF fork (facebook#12980) //<Flarnie Marchan>// - **[e0c78344e](facebook/react@e0c78344e)**: Retry on error if there's lower priority pending work (facebook#12957) //<Andrew Clark>// - **[9725065eb](facebook/react@9725065eb)**: Update bundle sizes for 16.4.1 release //<Dan Abramov>// - **[0b87b2790](facebook/react@0b87b2790)**: Updating package versions for release 16.4.1 //<Dan Abramov>// - **[036ae3c6e](facebook/react@036ae3c6e)**: Use native event dispatching instead of Simulate or SimulateNative (facebook#13023) //<Philipp Spieß>// - **[945fc1bfc](facebook/react@945fc1bfc)**: Call gDSFP with the right state in react-test-render (facebook#13030) //<Rafał Ruciński>// - **[392530104](facebook/react@392530104)**: Remove feature flag around 'getDerivedStateFromProps' bug fix (facebook#13022) //<Flarnie Marchan>// - **[1594409fa](facebook/react@1594409fa)**: Scheduler depends on common packages (facebook#13020) //<Dan Abramov>// - **[d5c11193e](facebook/react@d5c11193e)**: Added production profiling bundle type (facebook#12886) //<Brian Vaughn>// - **[ec60457bc](facebook/react@ec60457bc)**: Popping context is O(1) in SSR (facebook#13019) //<Dan Abramov>// - **[30bc8ef79](facebook/react@30bc8ef79)**: Allow multiple root children in test renderer traversal API (facebook#13017) //<Dan Abramov>// - **[d480782c4](facebook/react@d480782c4)**: Don’t error when returning an empty Fragment (facebook#12966) //<Philipp Spieß>// - **[4ac6f133a](facebook/react@4ac6f133a)**: Fallback to event.srcElement for IE9 (facebook#12976) //<Nathan Hunzaker>// - **[23be4102d](facebook/react@23be4102d)**: Fixed an issue with nested contexts unwinding when server rendering. Issue facebook#12984 (facebook#12985) //<Eric Soderberg>// - **[d0d428064](facebook/react@d0d428064)**: Remove old reference to inst._wrapperState (facebook#12987) //<Nathan Hunzaker>// - **[c78957eac](facebook/react@c78957eac)**: Fix an SVG focusing crash in IE11 (facebook#12996) //<Jifa Jiang>// - **[bfb12ebb5](facebook/react@bfb12ebb5)**: delete a couple of redundant lines in performWorkOnRoot() in ReactFiberScheduler.js (facebook#13003) //<Nathan Quarles>// - **[394b17eed](facebook/react@394b17eed)**: Update custom renderer docs //<Dan Abramov>// - **[188c4252a](facebook/react@188c4252a)**: Fix react-dom ReferenceError requestAnimationFrame in non-browser env (facebook#13000) (facebook#13001) //<Ivan Babak>// - **[9cf3733a9](facebook/react@9cf3733a9)**: update comment in computeAsyncExpiration() to reflect code (facebook#12994) //<Nathan Quarles>// - **[c5a733e1e](facebook/react@c5a733e1e)**: Fix links of docs on the comment (facebook#12795) //<Ende93>// - **[36546b513](facebook/react@36546b513)**: Set the correct initial value on input range (facebook#12939) //<Maxime Nory>// - **[15767a8f8](facebook/react@15767a8f8)**: [scheduler] 5/n Error handling in scheduler (facebook#12920) //<Flarnie Marchan>// - **[3118ed9d6](facebook/react@3118ed9d6)**: Expose unstable_interactiveUpdates on ReactDOM (facebook#12943) //<Andrew Clark>// - **[524a74331](facebook/react@524a74331)**: Fix for Flow issues in SimpleCacheProvider (facebook#12942) //<Flarnie Marchan>// - **[ae57b125c](facebook/react@ae57b125c)**: [simple-cache-provider] Use LRU cache eviction (facebook#12851) //<Andrew Clark>// - **[e0a03c1b4](facebook/react@e0a03c1b4)**: Extend input type check in selection capabilities (facebook#12062) (facebook#12135) //<Spyros Ioakeimidis>// - **[79a740c6e](facebook/react@79a740c6e)**: Rename variables to remove references to 'global' global (facebook#12931) //<Flarnie Marchan>// - **[ff724d3c2](facebook/react@ff724d3c2)**: [scheduler] 4/n Allow splitting out `schedule` in fb-www, prepare to fix polyfill issue internally (facebook#12900) //<Flarnie Marchan>// - **[83f76e4db](facebook/react@83f76e4db)**: ForwardRefs supports propTypes (facebook#12911) //<Brian Vaughn>// - **[8aeea5afa](facebook/react@8aeea5afa)**: Do not assign node.value on input creation if no change will occur (facebook#12925) //<Nathan Hunzaker>// - **[aa85b0fd5](facebook/react@aa85b0fd5)**: Upgrade to Jest 23 (facebook#12894) //<Simen Bekkhus>// - **[61777a78f](facebook/react@61777a78f)**: [scheduler] 3/n Use a linked list instead of map and queue for callback storage (facebook#12893) //<Flarnie Marchan>// - **[e7bd3d59a](facebook/react@e7bd3d59a)**: No longer expose ReactNativeComponentTree (facebook#12904) //<Sebastian Markbåge>// - **[f35d989be](facebook/react@f35d989be)**: TestRenderer warns if flushThrough is passed the wrong params (facebook#12909) //<Brian Vaughn>// - **[557870067](facebook/react@557870067)**: Record "actual" times for all Fibers within a Profiler tree (alt) (facebook#12910) //<Brian Vaughn>// - **[76e07071a](facebook/react@76e07071a)**: [scheduler] 2/n Adding 'schedule' fixture (facebook#12884) //<Flarnie Marchan>// - **[345e0a71a](facebook/react@345e0a71a)**: Improve tests for 'schedule' module (facebook#12880) //<Flarnie Marchan>// - **[8765d6089](facebook/react@8765d6089)**: Update bundle sizes for 16.4.0 release //<Andrew Clark>// - **[d427a563d](facebook/react@d427a563d)**: Updating package versions for release 16.4.0 //<Andrew Clark>// - **[53852a887](facebook/react@53852a887)**: add functional components warning about legacy context api (facebook#12892) //<Chang Yan>// - **[fe747a51c](facebook/react@fe747a51c)**: Add React.Timeout to getComponentName (facebook#12890) //<Toru Kobayashi>// - **[c601f7a64](facebook/react@c601f7a64)**: add siblings Timeout components test case (facebook#12862) //<Chang Yan>// - **[735035837](facebook/react@735035837)**: add legacy context API warning in strict mode (facebook#12849) //<Chang Yan>// - **[e88579184](facebook/react@e88579184)**: Fix a regression that caused us to listen to extra events at the top (facebook#12878) //<Dan Abramov>// - **[7c0aca289](facebook/react@7c0aca289)**: Rollup freeze: false (facebook#12879) //<Brian Vaughn>// - **[33289b530](facebook/react@33289b530)**: Tests and fixes for 'timing out' behavior (facebook#12858) //<Flarnie Marchan>// - **[ad27845cc](facebook/react@ad27845cc)**: Fix double-firing submit events (facebook#12877) //<Sophie Alpert>// - **[dd5fad296](facebook/react@dd5fad296)**: Update Flow to 0.70 (facebook#12875) //<Dan Abramov>// - **[13003654e](facebook/react@13003654e)**: Pass "start time" and "commit time" to Profiler callback (facebook#12852) //<Brian Vaughn>// - **[dc3b144f4](facebook/react@dc3b144f4)**: Treat Rollup "warnings" as errors (facebook#12868) //<Dan Abramov>// - **[d7b9b4921](facebook/react@d7b9b4921)**: Fix react native example links in README of 'react-reconciler' (facebook#12871) //<Kevin (Kun) "Kassimo" Qian>// - **[9bed4a6ae](facebook/react@9bed4a6ae)**: https in reactProdInvariant text (facebook#12869) //<Sophie Alpert>// - **[47b003a82](facebook/react@47b003a82)**: Resolve host configs at build time (facebook#12792) //<Dan Abramov>// Release Notes: [GENERAL] [FEATURE] [React] - React sync for revisions c0fe8d6...ae14317 Reviewed By: bvaughn Differential Revision: D8458731 fbshipit-source-id: afefaa50685d43e70c8ea85c70d2e29dee311cbb

brianfoody mentioned this issue Mar 12, 2017

[Bottom Navigation] RN 0.42.0 Not full width xotahal/react-native-material-ui#111

Open

brianfoody changed the title ~~Flex Layout - minWidth property is always used even if more space is available~~ Flex Layout - minWidth property is always used even if more space is available in RN 0.42 Mar 13, 2017

timomeh added a commit to timomeh/react-native-material-bottom-navigation that referenced this issue Apr 29, 2017

Remove minWidth from Tab because of RN Issue

7f845c1

see facebook/react-native#12878

timomeh mentioned this issue Apr 29, 2017

Remove spaces from container timomeh/react-native-material-bottom-navigation#16

Closed

hramos added the Icebox label Sep 21, 2017

hramos closed this as completed Sep 21, 2017

facebook locked as resolved and limited conversation to collaborators Sep 21, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flex Layout - minWidth property is always used even if more space is available in RN 0.42 #12878

Flex Layout - minWidth property is always used even if more space is available in RN 0.42 #12878

brianfoody commented Mar 12, 2017

sckoh commented Apr 15, 2017

guiherzog commented Jul 20, 2017

hramos commented Sep 21, 2017

pedro commented Jan 16, 2018 •

edited

Loading

Flex Layout - minWidth property is always used even if more space is available in RN 0.42 #12878

Flex Layout - minWidth property is always used even if more space is available in RN 0.42 #12878

Comments

brianfoody commented Mar 12, 2017

Description

Reproduction

Solution

Additional Information

sckoh commented Apr 15, 2017

guiherzog commented Jul 20, 2017

hramos commented Sep 21, 2017

pedro commented Jan 16, 2018 • edited Loading

pedro commented Jan 16, 2018 •

edited

Loading