ListItem.Content alignment of elements is off

[markl-vesper]

Hi All

Working on migrating a project from RN 0.65.1 & elements 2.0.0 to RN 0.70.2 & elements 4.0.0-rc6

I have a modal from react-native-modal 13.0.0. The modal iterates thru an array of values and generates a listItem for each value resulting in the the attached image.

Code is

const ExtraItem = ({
    title, rightTitle, color = Colors.darkGray, icon, primary
}) => {
    return (
        <ListItem topDivider>
            <ListItem.Content>
                <ListItem.Title>
                    <Text>{title}</Text>
                </ListItem.Title>
            </ListItem.Content>
            <ListItem.Content>
            <ListItem.Title style={{ fontWeight: primary ? 'bold' : 'normal'}}>
                <Text>{rightTitle}</Text>
            </ListItem.Title>
            <Icon name={icon} color={color} type={'material-community'}/>
            </ListItem.Content>
        </ListItem>
    );
};

When I look at the examples available on the elements website and recreate a simaler layout the left and the right content align perfectly however in our app the items do not align. Some text is higher than the left and the icon is lower.

We have tried using the right boolean without any change in behaviour as well as various other props but nothing makes the content line up.

Does anyone have any ideas about how to make the text and icons line up? Screenshot is from iOS Simulator and not a real device, This has also not been tested on Android as yet. We have only JUST got the iOS build working and are now working thru the UX changes required by the changes to the versions.

Any assistance or guidance is appreciated as I am not a JSX/HTML expert at all

Thanks

[markl-vesper]

And the answer is to not include the both the right hand side and the icon in the same code and return the appropriate one conditionally. I guess it must of been rendering both items

    return icon ? (
        <ListItem topDivider>
            <ListItem.Content>
                <ListItem.Title>
                    <Text>{title}</Text>
                </ListItem.Title>
            </ListItem.Content>
            <ListItem.Content>
            <Icon name={icon} color={color} type={'material-community'}/>
            </ListItem.Content>
        </ListItem>
    ) : (
        <ListItem topDivider>
            <ListItem.Content>
                <ListItem.Title>
                    <Text>{title}</Text>
                </ListItem.Title>
            </ListItem.Content>
            <ListItem.Content>
            <ListItem.Title style={{ fontWeight: primary ? 'bold' : 'normal'}}>
                <Text>{rightTitle}</Text>
            </ListItem.Title>
            </ListItem.Content>
        </ListItem>
    )
};