search

pankod / react-native-picker-modal-view

An unified React Native Picker Modal component for iOS and Android.
204 stars 55 forks source link

How to resolve large item's text? #66

Open axdemelas opened 3 years ago

axdemelas commented 3 years ago

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

Screen Shot 2020-10-14 at 08 19 45

How can I force padding/margin between items?

issue-label-bot[bot] commented 3 years ago

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 commented 3 years ago

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