flex: 1 does not set flexGrow: 1 #1323

New Issue

Open

opened 2021-05-10 08:27:06 -07:00 by darkbasic · 9 comments

darkbasic commented 2021-05-10 08:27:06 -07:00 (Migrated from github.com)

Copy Link

Description

Setting the style flex: 1 is supposed to set flexGrow: 1, flexShrink: 1 and flexBasis: "auto".
Apparently it doesn't work because setting flex: 1 produces a different output than flexGrow: 1, flexShrink: 1 and flexBasis: "auto" (see screenshots below).

React Native version:

$ yarn react-native info
yarn run v1.22.10
$ /home/niko/devel/beach/client/node_modules/.bin/react-native info
info Fetching system and libraries information...
System:
    OS: Linux 5.11 Fedora 34 (Workstation Edition) 34 (Workstation Edition)
    CPU: (8) x64 AMD Ryzen 5 2400G with Radeon Vega Graphics
    Memory: 33.34 GB / 62.81 GB
    Shell: 5.1.0 - /bin/bash
  Binaries:
    Node: 12.22.1 - /tmp/yarn--1620659398547-0.22115473234857919/node
    Yarn: 1.22.10 - /tmp/yarn--1620659398547-0.22115473234857919/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v12.22.1/bin/npm
    Watchman: 0.0.0 - /usr/bin/watchman
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: ~17.0.2 => 17.0.2 
    react-native: 0.64.1 => 0.64.1 
  npmGlobalPackages:
    *react-native*: Not Found
Done in 0.83s.

react-native-elements is at version 3.4.1.

Steps To Reproduce

The view you see in the Flipper screenshots below is the one created by react-native-elements's ListItem.Content, which applies the styles in styles.container to its children View (which gets automatically created):

}) => {
  return (
    <ListItem bottomDivider>
      <ListItem.Content style={styles.container}>
        <Everythingelse />
      </ListItem.Content>
    </ListItem>
  );
};

export const ITEM_HEIGHT = 130;

const styles = StyleSheet.create({
  container: {
    height: ITEM_HEIGHT,
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 'auto',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'stretch',
  },

react-native-elements's ListItem.Content also applies flex: 1 to its automatically created children View, but despite that if I omit flexGrow: 1 in styles.container the layout breaks. That means that the shorthand flex: 1 somehow does not set flexGrow: 1.

Expected Results

flex: 1 should automatically set flexGrow: 1, flexShrink: 1 and flexBasis: "auto". It shouldn't be necessary to manually set flexGrow: 1.

Snack, code example, screenshot, or link to a repository:

flexGrow: 1 + flexShrink: 1 + flexBasis: "auto":

flex: 1:

## Description Setting the style `flex: 1` is supposed to set `flexGrow: 1`, `flexShrink: 1` and `flexBasis: "auto"`. Apparently it doesn't work because setting `flex: 1` produces a different output than `flexGrow: 1`, `flexShrink: 1` and `flexBasis: "auto"` (see screenshots below). ## React Native version: ``` $ yarn react-native info yarn run v1.22.10 $ /home/niko/devel/beach/client/node_modules/.bin/react-native info info Fetching system and libraries information... System: OS: Linux 5.11 Fedora 34 (Workstation Edition) 34 (Workstation Edition) CPU: (8) x64 AMD Ryzen 5 2400G with Radeon Vega Graphics Memory: 33.34 GB / 62.81 GB Shell: 5.1.0 - /bin/bash Binaries: Node: 12.22.1 - /tmp/yarn--1620659398547-0.22115473234857919/node Yarn: 1.22.10 - /tmp/yarn--1620659398547-0.22115473234857919/yarn npm: 6.14.13 - ~/.nvm/versions/node/v12.22.1/bin/npm Watchman: 0.0.0 - /usr/bin/watchman SDKs: Android SDK: Not Found IDEs: Android Studio: Not Found Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: ~17.0.2 => 17.0.2 react-native: 0.64.1 => 0.64.1 npmGlobalPackages: *react-native*: Not Found Done in 0.83s. ``` `react-native-elements` is at version 3.4.1. ## Steps To Reproduce The view you see in the Flipper screenshots below is the one created by `react-native-elements`'s `ListItem.Content`, which applies the styles in `styles.container` to its children `View` (which gets automatically created): ``` }) => { return ( <ListItem bottomDivider> <ListItem.Content style={styles.container}> <Everythingelse /> </ListItem.Content> </ListItem> ); }; export const ITEM_HEIGHT = 130; const styles = StyleSheet.create({ container: { height: ITEM_HEIGHT, flexGrow: 1, flexShrink: 1, flexBasis: 'auto', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'stretch', }, ``` `react-native-elements`'s `ListItem.Content` also applies `flex: 1` to its automatically created children `View`, but despite that if I omit `flexGrow: 1` in `styles.container` the layout breaks. That means that the shorthand `flex: 1` somehow does not set `flexGrow: 1`. ## Expected Results `flex: 1` should automatically set `flexGrow: 1`, `flexShrink: 1` and `flexBasis: "auto"`. It shouldn't be necessary to manually set `flexGrow: 1`. ## Snack, code example, screenshot, or link to a repository: `flexGrow: 1` + `flexShrink: 1` + `flexBasis: "auto"`:  `flex: 1`: 

👍 2

ecreeth commented 2021-05-12 11:15:11 -07:00 (Migrated from github.com)

Copy Link

Setting the style flex: 1 is supposed to set flexGrow: 1, flexShrink: 1 and flexBasis: "auto".

>Setting the style [flex](https://reactnative.dev/docs/layout-props#flex): 1 is supposed to set flexGrow: 1, flexShrink: 1 and flexBasis: "auto". 

darkbasic commented 2021-05-13 03:35:36 -07:00 (Migrated from github.com)

Copy Link

@ecreeth flex: 1 doesn't set flexGrow: 1, flexShrink: 1, flexBasis: 0 either, because flexGrow: 1, flexShrink: 1, flexBasis: 0 renders correctly (see screenshot below) while flex: 1 doesn't (see previous screenshot).

@ecreeth `flex: 1` doesn't set `flexGrow: 1, flexShrink: 1, flexBasis: 0` either, because `flexGrow: 1, flexShrink: 1, flexBasis: 0` renders correctly (see screenshot below) while `flex: 1` doesn't (see previous screenshot). 

mxcihak commented 2021-08-17 07:11:19 -07:00 (Migrated from github.com)

Copy Link

Same here. For me this happens when I set container to flex: 1 (everything OK) then to flexGrow: 1 (everything OK) then to flex:1 (container disappears - height: 0)

Same here. For me this happens when I set container to flex: 1 (everything OK) then to flexGrow: 1 (everything OK) then to flex:1 (container disappears - height: 0)

darkbasic commented 2021-08-18 02:09:42 -07:00 (Migrated from github.com)

Copy Link

I'm not sure but I think it might be a react-native regression, if I recall correctly I've tried to downgrade several major versions and the issue disappeared. In the end I've decided to simply change my CSS because it was easier than debugging it.

I'm not sure but I think it might be a react-native regression, if I recall correctly I've tried to downgrade several major versions and the issue disappeared. In the end I've decided to simply change my CSS because it was easier than debugging it.

dharit-tan commented 2023-05-04 14:54:28 -07:00 (Migrated from github.com)

Copy Link

Bump, seeing this as well!

Bump, seeing this as well!

matart15 commented 2023-07-05 06:01:08 -07:00 (Migrated from github.com)

Copy Link

exact same.
and this issue is closed without explanation
https://github.com/facebook/react-native/issues/11565

exact same. and this issue is closed without explanation https://github.com/facebook/react-native/issues/11565

lunaleaps commented 2023-07-05 12:29:21 -07:00 (Migrated from github.com)

Copy Link

Can we move this issue to the yoga repo?
cc @NickGerleman

Can we move this issue to the yoga repo? cc @NickGerleman

NickGerleman commented 2023-12-16 00:11:07 -08:00 (Migrated from github.com)

Copy Link

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

One-value syntax: the value must be one of:

1. a valid value for : then the shorthand expands to flex: <flex-grow> 1 0.
2. a valid value for : then the shorthand expands to flex: 1 1 <flex-basis>.

So, on the web, the number should lead to:

1. Flex shrink being set to 1
2. Flex grow getting set to n if it is a number, or 1 if it is a length
3. Flex basis is set to n if it is a length, or 0 if it is a number

I confirmed this by looking at https://www.w3.org/TR/css-flexbox-1/#flex-common

The React Native/Yoga version of flex is documented here, and I checked that it is how the code works. The value for flex will contribute to flexGrow if positive, and flexShrink if negative. https://reactnative.dev/docs/layout-props#flex

62f47190fb from a few years ago has Yoga doing the right thing when opted into useWebDefaults (but I think actually doing the wrong thing wrt flexbasis should be set to zero). But changing these defaults for existing RN styles would be pretty breaking.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex > One-value syntax: the value must be one of: > 1. a valid value for [<flex-grow>](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow): then the shorthand expands to `flex: <flex-grow> 1 0`. > 2. a valid value for [<flex-basis>](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis): then the shorthand expands to `flex: 1 1 <flex-basis>`. So, on the web, the number should lead to: 1. Flex shrink being set to 1 2. Flex grow getting set to `n` if it is a number, or `1` if it is a length 3. Flex basis is set to `n` if it is a length, or `0` if it is a number I confirmed this by looking at https://www.w3.org/TR/css-flexbox-1/#flex-common The React Native/Yoga version of flex is documented here, and I checked that it is how the code works. The value for flex will contribute to `flexGrow` if positive, and `flexShrink` if negative. https://reactnative.dev/docs/layout-props#flex https://github.com/facebook/yoga/commit/62f47190fb2c13d47b13efacfc237f30ab312b51 from a few years ago has Yoga doing the right thing when opted into `useWebDefaults` (but I think actually doing the wrong thing wrt flexbasis should be set to zero). But changing these defaults for existing RN styles would be pretty breaking.

darkbasic commented 2023-12-16 00:22:45 -08:00 (Migrated from github.com)

Copy Link

If this is indeed the case, nice catch! Breaking or not the current defaults make little sense and are pretty annoying and confusing.

If this is indeed the case, nice catch! Breaking or not the current defaults make little sense and are pretty annoying and confusing.

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

main

export-D80452590

export-D80174965

export-D80174963

export-D70986391

export-D70792047

NickGerleman-ubuntu-24-04

release-v3.2

dependabot/npm_and_yarn/cross-spawn-7.0.6

dependabot/npm_and_yarn/http-proxy-middleware-2.0.7

dependabot/npm_and_yarn/express-4.21.0

dependabot/npm_and_yarn/micromatch-4.0.8

dependabot/npm_and_yarn/webpack-5.94.0

release-v3.1

release-v3.0

release-v2.0

v3.2.1

v3.2.0

v3.1.0

v3.0.4

v3.0.3

v3.0.2

v3.0.1

v3.0.0

v2.0.1

v2.0.0

v2.0.0-beta.2

v2.0.0-beta.1

v1.19.0

1.18.0

v1.17.0

1.17.0

1.15.0

1.16.0

1.14.0

1.12.0-pre.3

1.12.0-pre.2

v1.13.0

v1.12.0-pre.1

1.12.0-pre.1

v1.12.0-pre.0

1.11.0

1.10.0

1.9.0

v1.8.0

1.8.0

1.7.0

1.6.0

1.5.2

1.5.1

1.5.0

1.4.1

1.4.0

1.3.0

1.2.0

v2017.02.07.00

v2017.01.27.00

v2017.01.23.00

v2017.01.16.00

v2017.01.09.00

v2017.01.02.00

v2016.12.26.00

v2016.12.19.00

v2016.12.12.00

v2016.12.05.00

v2016.11.28.00

v2016.11.21.00

v2016.11.14.00

v1.1.1

v1.1.0

v1.0.0

v0.0.6

v0.0.5

v0.0.4

0.0.3

Labels

Clear labels

Algorithm

Build and Infrastructure

C#

C++ Enhancement

CLA Signed

Discussion

Documentation

Feature Request

Java

JavaScript

Merged

Question

Reverted

Shared with Meta

Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

YogaKit

YogaLayout ViewGroup

bug

dependencies

Pull requests that update a dependency file

duplicate

enhancement

fb-exported

fh:direct-merge-enabled

invalid

ruby

Pull requests that update Ruby code

wontfix

No Label

Algorithm

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

DaddyFrosty

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1323

No description provided.