CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-proptypesreact-native-popup-menu
kdiv
kdiv

Reputation: 33

Custom styling for MenuOption in React native popup menu

So I'm new to React (and JavaScript too for that matter). I'm creating an App using react native and currently trying to style my popup menu. (which looks like this: Popup menu image)

I want to change the style of the options (make the font size bigger and space them out and change the font color too). My code looks something like this:

<MenuProvider>
      <Menu >
        <MenuTrigger>
            <Image
              style={styles.menucontainer}
              resizeMode="contain"
              source={require('../assets/icon_more.png')}>
            </Image>
        </MenuTrigger>
        <MenuOptions optionsContainerStyle={styles.optionsstyle}>
          <MenuOption  text= 'About' />
          <MenuOption  text= 'Help & Feedback'/>
          <MenuOption  text= 'Sign Out'/>
        </MenuOptions>
      </Menu>
</MenuProvider>

After checking https://github.com/instea/react-native-popup-menu/blob/master/src/MenuOption.js I found a prop customStyles. Just like I passed a styling object for MenuOptions as prop optionContainerStyle, I tried passing customStyles for MenuOption but that produced an error:

In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.

Here is my styles code:

const styles = StyleSheet.create({
  optionsstyle:{
    marginTop:  height*32/dev_dimension.h,
    marginLeft: width*184/dev_dimension.w,
    backgroundColor: '#fafafa',
    width:  width*168/dev_dimension.w,
    height: height*160/dev_dimension.h,
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'space-between',
  },
});

Can anyone tell what I'm doing wrong?

Upvotes: 2

Views: 8482

Answers (1)

sodik
sodik

Reputation: 4683

According to documentation the optionsContainerStyle are deprecated and I am not sure if they work properly. Try to use customStyles props instead as seen in StylingExample where you can find full example.

The thing is that customStyles is map of styles for different parts. Something like

<MenuOptions customStyles={{optionWrapper: { padding: 5}, optionText: styles.text}}>

Upvotes: 3

Related Questions