View not showing nested group of components

Description

Yoga layout not showing complex components with state in nested flexboxes

Steps to reproduce

Steps to reproduce

1. Launch the next code in Expo Snack or local project. You can just clone this repository or use expo shack

import { Text, View, StyleSheet } from 'react-native';

import { TextInput } from 'react-native-paper';

export const WithBaseline = ({
  style,
  children,
}) => (
  <View style={[styles.withBaselineRoot, style]}>
    <View style={styles.withBaseline}>
      {children}
    </View>
    <View style={styles.adjust} />
  </View>
);

const NoBaseline = ({
  style,
  children,
}) => (
  <View style={[styles.noBaselineRoot, style]}>
    {children}
  </View>
);

const FieldWrapper = ({
  style,
  children,
}) => (
  <View style={[styles.fieldWrapperRoot, style]}>
    {children}
  </View>
);

export default function App() {
  return (
    <NoBaseline style={{ flexGrow: 1 }}>
      <FieldWrapper style={{ width: '100%', height: 125, justifyContent: 'center' }}>
        <Text>Group 1</Text>
      </FieldWrapper>
      
      <WithBaseline style={{ width: '100%' }}>
        <FieldWrapper style={{ width: '25%' }}>
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
        </FieldWrapper>
        <FieldWrapper style={{ width: '25%' }}>
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
        </FieldWrapper>
        <FieldWrapper style={{ width: '25%' }}>
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
        </FieldWrapper>
        <FieldWrapper style={{ width: '25%' }}>
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
        </FieldWrapper>
      </WithBaseline>
      <FieldWrapper style={{ width: '100%', height: 125, justifyContent: 'center' }}>
        <Text>Group 2</Text>
      </FieldWrapper>
      <WithBaseline style={{ width: '100%' }}>
        <FieldWrapper style={{ width: '33%' }}>
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
        </FieldWrapper>
        <FieldWrapper style={{ width: '33%' }}>
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
        </FieldWrapper>
        <FieldWrapper style={{ width: '33%' }}>
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
          <TextInput
            label="Email"
          />
        </FieldWrapper>
      </WithBaseline>
    </NoBaseline>
  );
}

const styles = StyleSheet.create({
  withBaselineRoot: {
    flexDirection: 'column',
  },
  noBaselineRoot: {
    alignItems: 'flex-start',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  fieldWrapperRoot: {
    flexDirection: 'column',
  },
  withBaseline: {
    alignItems: 'flex-end',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  adjust: {
    width: '100%',
    flex: 1,
  },
});

2. Open in web

As you can see, there are Group 1 and Group 2 with several text inputs

npm run web

3. Launch on android

Ooops. Group 2 is missing

npm run android

Issue

Group 2 is missing!!!

React Native Version

0.74.4

Affected Platforms

Runtime - Android

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12450H
  Memory: 4.91 GB / 15.68 GB
Binaries:
  Node:
    version: 20.13.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 10.5.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-241.18034.62.2411.12071903
  Visual Studio:
    - 17.10.34928.147 (Visual Studio Community 2022)
Languages:
  Java: 11.0.24
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

No logs captured

Reproducer

https://github.com/tripolskypetr/react-native-bug-reproducer

Screenshots and Videos

Comment

Changing all <WithBaseline /> to <NoBaseline/> temporary solves the problem. That means this is a yoga layout problem. The problem appears on all platforms: iOS and Android both.

Start with the linked react-native-bug-reproducer and run the reported npm run web and npm run android commands. Compare the WithBaseline and NoBaseline cases, focusing on the nested flexbox layout and the missing Group 2 output. Done means the reproduced layout renders Group 2 on Android as it does on web.