YGNode zero size when combine flex-direction: column and flex-direction: row on a fifth block

[tripolskypetr]

Report

• I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

Trying to launch the next layout in react-native app. Published in this repository and in 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,
  },
});

Expected Behavior

When testing with react-native-web I am receiving the correct layout

Actual Behavior

But on iOS and Android both the Group 2 is not shown. That means this is not a platform specific problem. Affected all platforms, both of them use Yoga Layout engine

Changing all <WithBaseline /> to <NoBaseline/> temporary solves the problem.

Link to Code

expo repo
expo shack (like jsfiddle)
bug-reproducer