weird behavior for text components inside flexDirection row

[eeeeaarr]

Description

It's not really clear what the flexBasis ends up being when you have a text field set to: numberOfLines={1} ellipsizeMode="tail"

Inside a flexDirection=row container.

• if you don't set any of flexBasis, flexGrow, or flexShrink, and try to set a margin on the Text component, only the left margin will be honored
• if you set flexBasis to something small, and set flexGrow, it lays out correctly and the right margin is honored
• if you set flexBasis to something huge, and set flexShrink, it lays out correctly and the right margin is honored
• if you just set flexShrink, it seems to be aggressively wrapping content earlier than it needs to, and the text is shorter, not breaking mid-word
• if you just set flexGrow, you get the same behavior as if you didn't set anything (right margin not honored)

I've been thinking about this and I can't figure out what the rationale for this behavior is. It almost seems like the text component isn't setting its flexBasis independently, in other words it's setting a flexBasis based on what styles you passed to it?

React Native Version

0.71.7

Output of npx react-native info

info Fetching system and libraries information... System: OS: macOS 13.2.1 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Memory: 10.03 GB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 19.7.0 - ~/.nvm/versions/node/v19.7.0/bin/node Yarn: Not Found npm: 9.6.4 - ~/.nvm/versions/node/v19.7.0/bin/npm Watchman: 2023.03.06.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.12.0 - /Users/eeeeaaii/.rbenv/versions/2.7.6/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4 Android SDK: API Levels: 31, 32, 33 Build Tools: 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0 System Images: android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9514443 Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild Languages: Java: 11.0.18 - /Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.7 => 0.71.7 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

see above

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

  <View
    style={{
      flexDirection: "row",
      backgroundColor: "red",
      borderWidth: 1,
      borderColor: "black",
    }}
  >

   <Text
        numberOfLines={1}
        ellipsizeMode="tail"
        style={{
          backgroundColor: "yellow",
          margin: 10,
          fontSize: 20,
          flexGrow: 1,
          color: "black",
        }}
      >
        a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
        a a a a a a a a a a a
      </Text>

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.11. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[redpanda-bit]

Hey @eeeeaaii I used the code you provided and works fine on 0.72.0.

It'd be helpful if you can provide specific code that reproduces the issue –even though you provided steps to reproduce. Feel free to use this https://github.com/react-native-community/reproducer-react-native.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.