How to resolve large item's text?

[axdemelas]

I have a picker modal that some item's have more than 3 lines and this causes overlapping of the texts:

How can I force padding/margin between items?

[issue-label-bot]

Issue-Label Bot is automatically applying the label question to this issue, with a confidence of 0.79. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[boris-burgos]

The same issue happens when a large font size is used.

The problem is in ListItemStyle.container used in ListItemComponent wich have a fixed height:

react-native-picker-modal-view/src/Components/ListItem.tsx

Line 9 in fffb3c1

export class ListItemComponent extends React.PureComponent<IListItemInDto, {}> {

If you use a custom render item it does not happens.

renderListItem={(defaultSelected, item) => {
        return (
          <View style={ListItemStyle.btnContainer}>
            <Text style={[defaultSelected && item.Name === defaultSelected.Name && ListItemStyle.selected]}>
              {item.Name}
            </Text>
          </View>
        )
      }}

I belive this could be fixed if the fixed height is removed or the component accepts a custom style prop.

This is because the custom render touchable does not uses the ListItemStyle.container