react-native-hold-menu/website/docs/props.md

id, title, slug

id	title	slug
props	Props	/props

Configuration

items

Array of menu items.

name	type	required
text	string	YES
icon	() => React.ReactNode | null	NO
onPress	function	YES
isTitle	boolean	NO
isDestructive	boolean	NO
withSeperator	boolean	NO

Example

<HoldItem
  items={[
    { text: 'Action 1', icon: null, onPress: () => {} },
    { text: 'Action 2', icon: null, onPress: () => {} },
  ]}
/>

Check out the other examples here.

menuAnchorPosition

Menu anchor position is calculated automaticly. But you can override the calculation by passing an anchor position. Auto calculation will be "top-left", "top-center" or "top-right". If you want to open menu from bottom, you need to use "bottom-left", "bottom-center" or "bottom-right". Or if you want to use auto calculation for bottom, see bottom prop.

type	required
"top-center" | "top-left" | "top-right"| "bottom-center" | "bottom-left" | "bottom-right"	NO

Example

<HoldItem menuAnchorPosition="top-center" />

bottom

Hold Menu automaticly calculates if you do not set menuAnchorPosition. If you want to open menu from bottom like Telegram bottom nav buttons in iOS and use auto anchor calculation, you should set bottom as true.

type	default	required
boolean	false	NO

disableMove

You may need disable move of holded item for your example. Set it true.

type	default	required
boolean	false	NO

styles

Hold item container styles. You may need dynamic width or hight for some examples like message boxes. See Whatsapp example.

type	default	required
ViewStyle | ViewStyle[];	{}	NO

Example

// For Whatsapp example
<HoldItem
  styles={{
    position: 'relative',
    maxWidth: '80%',
  }}
/>