CODEWITHSUNDEEP
unicodereact-nativereact-native-popup-menu
nataroo
nataroo

Reputation: 23

How to include menu options with custom icons?

The documentation for react native popup menu mentions how to create menu options with a checkmark

const CheckedOption = (props) => ( )

I want to create menu options with custom icons. I do not have the unicode value for those icons. I created a custom MenuOptionWithIcon component and wrapped the icon and the menu option inside a view.

export class MenuOptionWithIcon
    extends React.Component<IMenuOptionProps, {}> {

    public static defaultProps: Partial<IMenuOptionProps> = {
        disabled: false,
    };

    public render() {
        return (
            <View style={PopupMenuStyleSheet.menuOptionWithIcon}>
                {this.props.icon}
                <MenuOption
                    {...this.props}
                    text={this.props.text}
                    onSelect={this.props.onSelect}
                    disabled={this.props.disabled}
                />
            </View>
        );
    }
}

But I am not able to apply customStyles to these options now. I want to increase the padding of each of these options so that the tap target is increased. Is this the right way to create a custom menu option with an icon? Or is there a way to get unicode values for the icons that I need? Thanks!

EDIT:

Based on the suggestion in the answer below, I did the following but I now only see the text in my menu option. I don't see the Icon being displayed. onSelect works, text is displayed but the icon is not displayed.

const IconOption = (props) => (
  <MenuOption {...props}>
     <Icon name={props.iconName} size={30} />
     {props.children}
  </MenuOption>
);

<MenuOptions customStyles={MenuOptionStyles}>
   <IconOption
       iconName='md-bookmark'
       onSelect={this.onSelectSave.bind(this)}
       text={MenuOptionStrings.Save}
   />
</MenuOptions>

Upvotes: 2

Views: 1291

Answers (1)

sodik
sodik

Reputation: 4683

for the icons you need special font - use e.g. react-native-vector-icons and then use the same approach as for CheckedOption:

const IconOption = ({iconName, text, ...others}) => (
  <MenuOption {...others} >
    <Text>
      <Icon name={iconName} />
      {' ' + text}
    </Text>
  </MenuOption>
)

Upvotes: 0

Related Questions