MenuItem's text "jumps" at the start

[xKRUTOIx]

Hello, I've faced a problem: when a menu shows up text jumps a little at the very beginning and it looks ugly on real devices, (here's a demo that shows this visual bug, decrease speed to 0.5). The MenuItem is very simple, it has string variable and vector icon.

Although, the glitch disappears when I remove either string or icon from MenuItem (demo).

Code of the menu if it helps:
_mainMenu = () => (<Menu ref={(ref) => this.menuRef = ref} style={styles.menuStyles} > <MenuItem textStyle={styles.menuTextStyles} underlayColor={'#2C2B30'} onPress={() => { this.props.editMessage(this.props.message); this._hideMenu(this.menuRef); }}> {strings.edit} <SvgEditMessage /> </MenuItem> <MenuDivider color={'#676570'}/> <MenuItem textStyle={styles.menuTextStyles} underlayColor={'#2C2B30'} onPress={() => { this._hideMenu(this.menuRef); this._showMenu(this.deletionMenuRef, this.messageRef); }}> {strings.delete} <SvgTrashIcon/> </MenuItem> </Menu>);

[likern]

@xKRUTOIx Could you provide simple app, which reproduces this issue? So I can run it and start debugging right away.

Something minimalistict, app with screen with one button, on tap on this button menu is showed up.

[xKRUTOIx]

@likern Thanks for the answer.
Simple app snack code

[likern]

@xKRUTOIx I have not touched that part of code from original project https://github.com/mxck/react-native-material-menu. It looks like only Text is supported for MenuItem.

That's what I found on original page:

Children must be based on <Text> component (like text itself, strings, react-native-vector-icons or > expo icons) otherwise you may get an error on a real device

MenuItem is just a something rendered within a Text component:

<TouchableHighlight
      {...props}
      disabled={disabled}
      onPress={onPress}
      style={[styles.container, style]}
      underlayColor={underlayColor}
    >
      <Text
        ellipsizeMode={Platform.OS === 'ios' ? 'clip' : 'tail'}
        numberOfLines={1}
        style={[
          styles.title,
          disabled && { color: disabledTextColor },
          textStyle,
        ]}
      >
        {children}
      </Text>
    </TouchableHighlight>

I don't think (haven't work with react-native-svg extensively) it is legible to put svg inside text.

[likern]

My suggestion is for now do not consider MenuItem as a required element. Just copy paste it, modify as you want and use instead of MenuItem.

[xKRUTOIx]

Ohh...I see, maybe it's better to ask in the original project then.

Although I've found this issue where the original project's author said that MenuItem treats vector icons as text, I've tried vector icon instead svg and I had the same glitch : (

Anyway, thanks for the answers!

[likern]

@xKRUTOIx It's more about how <Text /> is working in React Native. I think it doesn't work good with nesting other elements inside <Text /> like was pointed out in these bugs: facebook/react-native#25197, facebook/react-native#18826

You can inject string or other Text elements inside Text:

<Text style={styles.baseText}>
  <Text style={styles.titleText} onPress={this.onPressTitle}>
    {this.state.titleText + '\n\n'}
  </Text>
  <Text numberOfLines={5}>
    {this.state.bodyText}
  </Text>
</Text>

And https://github.com/oblador/react-native-vector-icons components are just standard Text - that's why they are working inside Text. https://github.com/react-native-community/react-native-svg is a native component, implementing SVG. It doesn't based on React Native Text component.

I think you can ask question in react-native-svg about putting SVG inside Text.

[xKRUTOIx]

@likern You were right. I managed to solve this problem, I just used my custom component instead of MenuItem. Looks like you can close this issue.
Thanks a lot!