Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to wrap text inside MenuItem? #99

Open
medmo7 opened this issue Nov 3, 2020 · 4 comments
Open

How to wrap text inside MenuItem? #99

medmo7 opened this issue Nov 3, 2020 · 4 comments

Comments

@medmo7
Copy link

medmo7 commented Nov 3, 2020

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
Copy link

Hey @medmo7 did you find a workaround for this?

@medmo7
Copy link
Author

medmo7 commented Jan 17, 2021

I've added this prop to MenuItem:

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

@SirPhemmiey
Copy link

Alright, thanks

@froger
Copy link

froger commented Jul 20, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants