Different handling of aspect ratio on flexible items compared to CSS

Description

Here's the reproducing code:

import { View, ScrollView } from 'react-native';


export default function App() {
  return (
    <ScrollView>
      <View style={{flex: 1, }}>
        <View style={{ flexDirection: 'row', gap: 5, backgroundColor: 'red' }}>
          <View style={{ flex: 2, aspectRatio: 1 }}>
            <View style={{ backgroundColor: 'blue', width: '100%', height: '100%'}} />
          </View>
          <View style={{ flex: 1, gap: 5 }}>
            <View style={{ flex: 1, aspectRatio: 1 }}>
              <View style={{ backgroundColor: 'blue', width: '100%', height: '100%' }} />
            </View>
            <View style={{ flex: 1, aspectRatio: 1 }}>
              <View style={{ backgroundColor: 'blue', width: '100%', height: '100%' }} />
            </View>
          </View>
        </View> 
      </View>
    </ScrollView>
  );
}

On the web, gap works as expected (no red line at the bottom):

On both Android and iOS, there is a red line at the bottom:

It seems like nested gap properties combined with aspectRatio and flex don't work correctly inside ScrollView.

Interesting to note:

• Removing ScrollView fixes it
• Replacing flex with flexGrow on the immediate children of flexDirection: 'row', also fixes it (but this would break the web so has to be conditional)

React Native Version

0.72.5

Output of npx react-native info

System:
OS: macOS 13.2.1
CPU: (10) arm64 Apple M1 Max
Memory: 6.23 GB / 64.00 GB
Shell:
version: 5.8.1
path: /bin/zsh
Binaries:
Node:
version: 18.17.1
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 9.6.7
path: /usr/local/bin/npm
Watchman:
version: 2023.01.30.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.11.3
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: javac 18
path: /usr/bin/javac
Ruby:
version: 2.7.6
path: /Users/dan/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.5
wanted: 0.72.5
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

See above.

Snack, screenshot, or link to a repository

https://snack.expo.dev/WvNJKiWAi

Start with the linked Snack reproduction and compare its nested flex, gap, aspectRatio, and ScrollView layout with the web result. Trace Yoga's handling of these properties during ScrollView measurement, then verify on iOS and Android that the red bottom line is gone without changing the reported web behavior.