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

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

New Issue
Open
opened 2024-08-05 06:43:22 -07:00 by tripolskypetr · 0 comments
tripolskypetr commented 2024-08-05 06:43:22 -07:00 (Migrated from github.com)
Copy Link

Report

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

image

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

image

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

Link to Code

expo repo
expo shack (like jsfiddle)
bug-reproducer

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/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](https://github.com/tripolskypetr/react-native-bug) and in [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, }, }); ``` # Expected Behavior When testing with [react-native-web](https://necolas.github.io/react-native-web/) I am receiving the correct layout ![image](https://github.com/user-attachments/assets/efead6c6-91cf-4fc8-be45-f20d08292979) # 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 ![image](https://github.com/user-attachments/assets/b0f35b50-e2b8-4232-bfff-bf6e0ead207f) Changing all `<WithBaseline />` to `<NoBaseline/>` temporary solves the problem. # Link to Code [expo repo](https://github.com/tripolskypetr/react-native-bug) [expo shack (like jsfiddle)](https://snack.expo.dev/@tripolskypetr/react-native-bug) [bug-reproducer](https://github.com/tripolskypetr/react-native-bug-reproducer)
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#1685
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?