DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Incorrect width calculations when using margin with align-items: 'stretch' #1788

New Issue
Open
opened 2025-02-19 03:22:50 -08:00 by LJNGDAHL · 3 comments
LJNGDAHL commented 2025-02-19 03:22:50 -08:00 (Migrated from github.com)
Copy Link

Description

When using a View with margin inside a parent View that has alignItems: 'stretch', the child's width is incorrectly calculated. The margin appears to be subtracted multiple times from the available width, making the child View significantly narrower than expected.

Expected behaviour

Given a parent View of width 400 and a child View with margin: 20:

  • Child width should be: 360 (parent width - margin * 2)
  • The margin of 20 should only be subtracted twice (left and right)

Steps to reproduce

  1. Create a minimal React Native app with this component:
import React from 'react';
import { Dimensions, View } from 'react-native';

function App(): React.JSX.Element {
  const size = Dimensions.get('window');
  return (
    <View
      style={{
        backgroundColor: 'red',
        width: size.width,
        height: size.height,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <View
        style={{
          backgroundColor: 'blue',
          aspectRatio: 16 / 9,
          alignSelf: 'stretch',
          margin: 24,
        }}
      />
    </View>
  );
}

export default App;
  1. Notice how width of child View is significantly narrower than expected.

React Native Version

0.77.1

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.1.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 683.89 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.13.1
    path: ~/.nvm/versions/node/v20.13.1/bin/node
  Yarn: Not Found
  npm:
    version: 10.8.1
    path: ~/.nvm/versions/node/v20.13.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.1
    wanted: 0.77.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

–

Reproducer

https://github.com/LJNGDAHL/layout-bug

Screenshots and Videos

screenshot showing the issue
### Description When using a View with `margin` inside a parent View that has `alignItems: 'stretch'`, the child's width is incorrectly calculated. The margin appears to be subtracted multiple times from the available width, making the child View significantly narrower than expected. ## Expected behaviour Given a parent View of width 400 and a child View with `margin: 20`: - Child width should be: `360` (parent width - margin * 2) - The margin of 20 should only be subtracted twice (left and right) ### Steps to reproduce 1. Create a minimal React Native app with this component: ```tsx import React from 'react'; import { Dimensions, View } from 'react-native'; function App(): React.JSX.Element { const size = Dimensions.get('window'); return ( <View style={{ backgroundColor: 'red', width: size.width, height: size.height, alignItems: 'center', justifyContent: 'center', }}> <View style={{ backgroundColor: 'blue', aspectRatio: 16 / 9, alignSelf: 'stretch', margin: 24, }} /> </View> ); } export default App; ``` 2. Notice how width of child View is significantly narrower than expected. ### React Native Version 0.77.1 ### Affected Platforms Runtime - iOS ### Output of `npx @react-native-community/cli info` ```text System: OS: macOS 15.1.1 CPU: (12) arm64 Apple M3 Pro Memory: 683.89 MB / 36.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 20.13.1 path: ~/.nvm/versions/node/v20.13.1/bin/node Yarn: Not Found npm: version: 10.8.1 path: ~/.nvm/versions/node/v20.13.1/bin/npm Watchman: Not Found Managers: CocoaPods: version: 1.16.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 24.0 - iOS 18.0 - macOS 15.0 - tvOS 18.0 - visionOS 2.0 - watchOS 11.0 Android SDK: Not Found IDEs: Android Studio: 2024.2 AI-242.23726.103.2422.12816248 Xcode: version: 16.0/16A242d path: /usr/bin/xcodebuild Languages: Java: version: 17.0.14 path: /opt/homebrew/opt/openjdk@17/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": installed: 15.0.1 wanted: 15.0.1 react: installed: 18.3.1 wanted: 18.3.1 react-native: installed: 0.77.1 wanted: 0.77.1 react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: true iOS: hermesEnabled: true newArchEnabled: true ``` ### Stacktrace or Logs ```text – ``` ### Reproducer https://github.com/LJNGDAHL/layout-bug ### Screenshots and Videos <img src="https://github.com/user-attachments/assets/b621f7fe-0160-4598-bc49-f66b6da657de" width="300" alt="screenshot showing the issue" />
👀 1
migueldaipre commented 2025-02-19 04:38:58 -08:00 (Migrated from github.com)
Copy Link

Hello @LJNGDAHL and thanks for reporting this problem, does it happen on Android too?

cc @NickGerleman

Hello @LJNGDAHL and thanks for reporting this problem, does it happen on Android too? cc @NickGerleman
👍 1
LJNGDAHL commented 2025-02-21 01:25:10 -08:00 (Migrated from github.com)
Copy Link

@migueldaipre: thanks for the quick response! Yes, it is happening on Android as well.

Screenshot from android emulator
@migueldaipre: thanks for the quick response! Yes, it is happening on Android as well. <img src="https://github.com/user-attachments/assets/0768feff-80fb-493c-9282-dba43c3c9c35" width="300" alt="Screenshot from android emulator" />
👍 1
AnnaRybkina commented 2025-05-22 06:53:21 -07:00 (Migrated from github.com)
Copy Link

Any progress on this one? 👂

Any progress on this one? 👂
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
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
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
DaddyFrosty
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1788
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?