react-native
react-native copied to clipboard
Second Text component in View line break
Description
I have two components following each other in component and I wanna so that the first component stretches as long as it can and then ellipsizing, but second component stayed close to first without ellipsizing and then in the right with ellipsized first component.
I've tried everything that I can think of but without success. This correctly works on the web but is not on the iOS and Android.
Steps to reproduce
Example:
<View style={{ flex: 1, flexDirection: 'row', }}>
<Text numberOfLines={1}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</Text>
<Text>
1000ms
</Text>
</View>
React Native Version
0.73.4
Affected Platforms
Runtime - Android, Runtime - iOS
Output of npx react-native info
System:
OS: macOS 14.3.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 7.33 GB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.11.0
path: /usr/local/bin/node
Yarn:
version: 1.22.21
path: /usr/local/bin/yarn
npm:
version: 10.4.0
path: /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.15.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- visionOS 1.0
- watchOS 10.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 15.2/15C500b
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.4
wanted: 0.73.4
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: true
newArchEnabled: false
Stacktrace or Logs
In logs everything okay
Reproducer
https://snack.expo.dev/@volodyaspace/second-component-line-break
Screenshots and Videos
same issue.