Wrapping the children of a ListItem component in a React Fragment breaks the layout

tran-simon commented 1 month ago

Is there an existing issue for this?

[X] I have searched the existing issues

Explain what you did

this:

  <ListItem>
    <Icon name="inbox" type="material-community" color="grey" />
    <ListItem.Content>
      <ListItem.Title>Inbox</ListItem.Title>
    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem>

looks different than:

    <ListItem>
      <>
        <Icon name="inbox" type="material-community" color="grey" />
        <ListItem.Content>
          <ListItem.Title>Inbox</ListItem.Title>
        </ListItem.Content>
        <ListItem.Chevron />
      </>
    </ListItem>

There is no spacing between the icon and the content when they are wrapped in a fragment

Expected behavior

Fragment should not affect the layout

Describe the bug

When wrapping the content of a ListItem element in a ReactFragment, the spacing between the elements is removed

Sandbox: https://snack.expo.dev/@simon.tran/rneui-listitem-bug

This is problematic, because there are cases where I would want to conditionnally render the listitem content

    <ListItem>
      {isLoading ? (
        <LoadingIndicator />
      ) : (
        <>
          <Icon name="inbox" type="material-community" color="grey" />
          <ListItem.Content>
            <ListItem.Title>Inbox</ListItem.Title>
          </ListItem.Content>
          <ListItem.Chevron />
        </>
      )}
    </ListItem>

Steps To Reproduce

1. Create a ListItem
2. Wrap its content in `<> </>`

Screenshots

Your Environment

`npx @rneui/envinfo`

``` React Native Elements Env Info ## Global Dependencies: No related dependency found ## Local Dependencies: - @rneui/base : ^4.0.0-rc.7 - @rneui/themed : ^4.0.0-rc.8 - @types/react-native : ^0.70.15 - react : 18.2.0 - react-native : 0.71.19 ```

void-hr commented 3 weeks ago

This issue might be caused by PadView not handling React.Fragment correctly, which disrupts padding. I can work on this and investigate further. Assign the issue to me, I’ll be happy to work on it.

The solution I'm considering is to flatten the children using React.Children.toArray to handle fragments properly.

tran-simon commented 3 weeks ago

hi @void-hr

I don't have the rights to edit the Assignees

void-hr commented 3 weeks ago

hello @tran-simon, no worries I'll wait for maintainer to assign the issue to me. I am not sure though, looks inactive to me.

react-native-elements / react-native-elements