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[bot]]

Issue-Label Bot is automatically applying the label question to this issue, with a confidence of 0.79. Please mark this comment with :thumbsup: or :thumbsdown: 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:

https://github.com/pankod/react-native-picker-modal-view/blob/fffb3c14a92f4c85be9e93a8286145ae27d0e199/src/Components/ListItem.tsx#L9

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