How to wrap text inside MenuItem?

[medmo7]

Thank for this library. I'm trying to wrap the text inside MenuItem so the totality of it is shown, now it is cut. Here is my implementation:

return (
    <View style={styles.container}>
      <Menu
        button={<View />}
        style={{...styles.menu, backgroundColor: props.appTheme.SECONDARY_BG}}
        ref={menu}>
        {dataSource.map((item, index) => {
          return (
              <MenuItem
                style={styles.menuItem}
                key={index}
                onPress={() => handlePressSearchItem(item)}>
                <Text
                  style={{
                    color: props.appTheme.DEFAULT_FONT_COLOR,
                    flexWrap: 'wrap',
                    flex: 1,
                  }}>
                  {item.place_name}
                </Text>
              </MenuItem>
          );
        })}
      </Menu>
    </View>
  );

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // alignItems: 'center',
    // justifyContent: 'center',
    // position: 'absolute',
    // width:'100%'
  },
  menu: {
    width: '86%',
  },
  loadingItem: {
    // alignItems:'center',
    // justifyContent:'center',
    // alignSelf:'center'
    marginLeft: 20,
  },
  menuItem: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    maxWidth: '100%',
  },
});

Thanks.

[SirPhemmiey]

Hey @medmo7 did you find a workaround for this?

[medmo7]

I've added this prop to MenuItem:

<MenuItem
     textStyle={{
         flexWrap: 'wrap',
            }}

[SirPhemmiey]

Alright, thanks

[froger]

Hello, I've the same issue here, I understand reading menu item file, the MenuItem component already wrap the children in a Text.

Passing ellipsizeMode='clip' to <MenuItem> make the text display without ellipsis, but as not every Text's props are available, I can't set a numberOfLines. That's especially problematic for french because we use to be very verbose.

<MenuItem ellipsizeMode='clip'>
  Politique de confidentialité
</MenuItem>

An option would be to set a textProps in <MenuItem /> to be available to override the props we want.