CODEWITHSUNDEEP
react-native
Nikita Polevoy
Nikita Polevoy

Reputation: 369

width for react-native-material-menu does not work

[react-native-material-menu] I try to customize menu, but style property "width" is not handled - menu still narrow.

return(
  <View style = {{
    width: 500
  }}>
  <Menu
    ref = { this.setMenuRef }
    button = {<RoundButton 
      buttonType = "menu"
      navigateTo = "menu"
      menuCall = {this.showMenu}
    style = {{
      width: 500
    }}
    />}
  >
    <MenuItem onPress = {this.hideMenu}>Reports TO DO</MenuItem>
    <MenuItem onPress = {this.hideMenu}>Settings TO DO</MenuItem>
    <MenuItem onPress = {this.hideMenu}>Help TO DO</MenuItem>
  </Menu>
</View>
);

Can it be customized?

Upvotes: 0

Views: 718

Answers (1)

Vignesh V Pai
Vignesh V Pai

Reputation: 819

Oops! Looks like you forgot to specify the height of the parent View.

Wrap your Menu component in a View that has a definite width and height.

The documentation clearly says:

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

Solution would be: 

<View style = {{ width: 500, height: 500 }}>

(You can specify the dimensions according to your needs).

OR

Flex can also be used.

<View style = {{ flex: 1 }}>

Upvotes: 1

Related Questions