Repository: react-native
Issue: View not showing nested group of components
Labels: Issue: Author Provided Repro

### 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](https://github.com/tripolskypetr/react-native-bug) or use [expo shack](https://snack.expo.dev/@tripolskypetr/react-native-bug)

```tsx
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

![web](https://github.com/user-attachments/assets/968703cb-4fda-4f7a-8d63-7a1311d584e1)

```bash
npm run web
```

3. Launch on android

Ooops. `Group 2` is missing

![android](https://github.com/user-attachments/assets/66b5495c-6fce-4cf1-8240-e1c6298b9047)

```bash
npm run android
```


## Issue

Group 2 is missing!!!

### React Native Version

0.74.4

### Affected Platforms

Runtime - Android

### Output of `npx react-native info`

```text
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

```text
No logs captured
```


### Reproducer

https://github.com/tripolskypetr/react-native-bug-reproducer

### Screenshots and Videos

![ezgif-6-7b08dc656f](https://github.com/user-attachments/assets/56d5b136-3f2c-435a-b267-4b90039b167f)


### 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.