How to display 2 or more lines in a row and dropdown text

[gilshaan]

[alephpt]

I've been wondering the same thing

[Pkcarreno]

I can handle this by using renderCustomizedRowChild prop.

create my own renderItem, since I like the style of the library just copy the renderFlatlistItem element into the main library file and remove the numberOfLines property from it.

Here is an example of how it would look:

  const RenderItem = (item) => {
      return (
        <Text
          allowFontScaling={false}
          style={{
            fontSize: 18,
            textAlign: "center",
            marginHorizontal: 8,
            color: "#000",
          }}
        >
          {
             /* Something to consider here, if you have something assigned to `rowTextForSelection`, you should pass that same function here, otherwise just pass the `item` variable like so `item.toString()` */
             customRowTextForSelection(item)
           }
        </Text>
      );
    };

Now, so that it can be seen correctly, you also have to edit the styles of the rowStyle parameter. the SelectDropdown component would look something like this:

<SelectDropdown
         // ...
          rowStyle={{
            minHeight: 50,
            height: undefined,
            // I added a vertical padding of 4 points because long texts are very close to the top and bottom of the row
            paddingVertical: 4,
          }}
          renderCustomizedRowChild={RenderItem}
         // ...

that's what worked for me.

Now my question is, does the numberOfLines parameter make any difference beyond aesthetics? In this case, I think that another parameter could be added to the component to allow the value of the numberOfLines of the element to be rendered in the row to be edited.

[AdelRedaa97]

The problem is that the height of each row should be known to calculate the possible height of the dropdown for the basic dropdown, you can use renderCustomizedRowChild to customize each row in the dropdown