### Project Setup and Development Commands

Source: https://github.com/react-native-menu/menu/blob/master/CONTRIBUTING.md

Commands to bootstrap the project, start the development server, and run the example app on Android and iOS. Also includes commands for type checking and linting.

```sh
yarn bootstrap
yarn start
yarn android
yarn ios
yarn typescript
yarn lint
yarn lint --fix
yarn test
```

--------------------------------

### Install with yarn

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Installs the @react-native-menu/menu package using yarn.

```sh
yarn add @react-native-menu/menu
```

--------------------------------

### Basic Usage Example

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Demonstrates the basic usage of the MenuView component in React Native, including defining menu actions, handling presses, and using a ref for Android-specific functionality.

```jsx
import {
  MenuView,
  MenuComponentRef
} from '@react-native-menu/menu';

// ...

const App = () => {
  const menuRef = useRef<MenuComponentRef>(null);
  return (
    <View style={styles.container}>
      <Button
        title="Show Menu with ref (Android only)"
        onPress={() => menuRef.current?.show()}
      />
      <MenuView
        ref={menuRef}
        title="Menu Title"
        onPressAction={({ nativeEvent }) => {
          console.warn(JSON.stringify(nativeEvent));
        }}
        actions={[
          {
            id: 'add',
            title: 'Add',
            titleColor: '#2367A2',
            image: Platform.select({
              ios: 'plus',
              android: 'ic_menu_add',
            }),
            imageColor: '#2367A2',
            subactions: [
              {
                id: 'nested1',
                title: 'Nested action',
                titleColor: 'rgba(250,180,100,0.5)',
                subtitle: 'State is mixed',
                image: Platform.select({
                  ios: 'heart.fill',
                  android: 'ic_menu_today',
                }),
                imageColor: 'rgba(100,200,250,0.3)',
                state: 'mixed',
              },
              {
                id: 'nestedDestructive',
                title: 'Destructive Action',
                attributes: {
                  destructive: true,
                },
                image: Platform.select({
                  ios: 'trash',
                  android: 'ic_menu_delete',
                }),
              },
            ],
          },
          {
            id: 'share',
            title: 'Share Action',
            titleColor: '#46F289',
            subtitle: 'Share action on SNS',
            image: Platform.select({
              ios: 'square.and.arrow.up',
              android: 'ic_menu_share',
            }),
            imageColor: '#46F289',
            state: 'on',
          },
          {
            id: 'destructive',
            title: 'Destructive Action',
            attributes: {
              destructive: true,
            },
            image: Platform.select({
              ios: 'trash',
              android: 'ic_menu_delete',
            }),
          },
        ]}
        shouldOpenOnLongPress={false}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>Test</Text>
        </View>
      </MenuView>
    </View>
  );
};

```

--------------------------------

### Install with npm

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Installs the @react-native-menu/menu package using npm.

```sh
npm install @react-native-menu/menu
```

--------------------------------

### React Native Menu Component Usage Example

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Demonstrates how to use the MenuView component in React Native, including setting up event handlers for menu opening and closing, and providing child views that trigger the menu.

```jsx
<MenuView
  onOpenMenu={() => {
    console.log('Menu was opened');
  }}
  onCloseMenu={() => {
    console.log('Menu was closed');
  }}
  // ... other props
>
  <View>
    <Text>Open Menu</Text>
  </View>
</MenuView>
```

--------------------------------

### Link native dependencies

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Links the native dependencies for the @react-native-menu/menu package using npx pod-install.

```sh
npx pod-install
```

--------------------------------

### MenuViewManager Versioning Strategy

Source: https://github.com/react-native-menu/menu/blob/master/CONTRIBUTING.md

Instructions for handling React Native version-specific changes in `MenuViewManager`. Modifications should be placed in version-specific folders within `reactNativeVersionPatch` and referenced in `build.gradle`.

```kotlin
src/reactNativeVersionPatch/75/MenuViewManager.kt
src/reactNativeVersionPatch/latest/MenuViewManager.kt
```

--------------------------------

### Objective-C File Location

Source: https://github.com/react-native-menu/menu/blob/master/CONTRIBUTING.md

Instructions on how to locate Objective-C source files for editing within the Xcode environment.

```objective-c
example/ios/MenuExample.xcworkspace
```

--------------------------------

### Mocking MenuView for Jest Tests

Source: https://github.com/react-native-menu/menu/blob/master/README.md

This TypeScript code demonstrates how to mock the MenuView component from '@react-native-menu/menu' using `jest.mock` to facilitate testing of components that use the menu.

```typescript
import type { MenuComponentProps } from '@react-native-menu/menu';

jest.mock('@react-native-menu/menu', () => ({
  MenuView: jest.fn((props: MenuComponentProps) => {
    const React = require('react');

    class MockMenuView extends React.Component {
      render() {
        return React.createElement(
          'View',
          { testID: props.testID },
          // Dynamically mock each action
          props.actions.map(action =>
            React.createElement('Button', {
              key: action.id,
              title: action.title,
              onPress: () => {
                if (action.id && props?.onPressAction) {
                  props.onPressAction({ nativeEvent: { event: action.id } });
                }
              },
              testID: action.id
            })
          ),
          this.props.children
        );
      }
    }

    return React.createElement(MockMenuView, props);
  })
}));
```

--------------------------------

### MenuAction Type Definition

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Defines the structure for a single action item within the menu, including its ID, title, optional subtitle, image, and sub-actions. It also specifies platform-specific properties for title color, image color, and state.

```typescript
export type MenuAction = {
  /**
   * Identifier of the menu action.
   * The value set in this id will be returned when menu is selected.
   */
  id?: string;
  /**
   * The action's title.
   */
  title: string;
  /**
   * (Android only)
   * The action's title color.
   * @platform Android
   */
  titleColor?: number | ColorValue;
  /**
   * (iOS14+ only)
   * An elaborated title that explains the purpose of the action.
   * @platform iOS
   */
  subtitle?: string;
  /**
   * The attributes indicating the style of the action.
   */
  attributes?: MenuAttributes;
  /**
   * (iOS14+ only)
   * The state of the action.
   * @platform iOS
   */
  state?: MenuState;
  /**
   * (Android and iOS13+ only)
   * - The action's image.
   * - Allows icon name included in project or system (Android) resources drawables and
   * in SF Symbol (iOS)
   * @example // (iOS)
   * image="plus"
   * @example // (Android)
   * image="ic_menu_add"
   */
  image?: string;
  /**
   * (Android and iOS13+ only)
   * - The action's image color.
   */
  imageColor?: number | ColorValue;
  /**
   * (Android and iOS14+ only)
   * - Actions to be displayed in the sub menu
   * - On Android it does not support nesting next sub menus in sub menu item
   */
  subactions?: MenuAction[];
};
```

--------------------------------

### MenuState Type Definition

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Defines the possible states for a menu action, which can be 'off', 'on', or 'mixed'. This is particularly useful for toggleable actions or actions with multiple states.

```typescript
/**
 * The state of the action.
 * - off: A constant indicating the menu element is in the “off” state.
 * - on: A constant indicating the menu element is in the “on” state.
 * - mixed: A constant indicating the menu element is in the “mixed” state.
 */
type MenuState = 'off' | 'on' | 'mixed';
```

--------------------------------

### React Native Menu Component Props

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Provides a detailed reference for the props available on the React Native Menu component. This includes platform-specific props like `ref` (Android) and `title` (iOS), as well as general props such as `isAnchoredToRight`, `shouldOpenOnLongPress`, `actions`, and `themeVariant`.

```APIDOC
MenuView:
  ref (Android only):
    Type: ref
    Required: No
    Description: Ref to the menu component.

  title (iOS only):
    Type: string
    Required: Yes
    Description: The title of the menu.

  isAnchoredToRight (Android only):
    Type: boolean
    Required: No
    Description: Boolean determining if menu should anchored to right or left corner of parent view.

  shouldOpenOnLongPress:
    Type: boolean
    Required: No
    Description: Boolean determining if menu should open after long press or on normal press.

  actions:
    Type: MenuAction[]
    Required: Yes
    Description: Actions to be displayed in the menu.

  themeVariant (iOS only):
    Type: enum('light', 'dark')
    Required: No
    Description: String to override theme of the menu. If you want to control theme universally across your app, see this package (https://github.com/vonovak/react-native-theme-control).

  onPressAction:
    Type: ({nativeEvent}) => void
    Required: No
    Description: Callback function that will be called when selecting a menu item. It will contain id of the given action.

  onCloseMenu:
    Type: () => void
    Required: No
    Description: Callback function that will be called when the menu is dismissed. This event fires at the start of the dismissal, before any animations complete.

  onOpenMenu:
    Type: () => void
    Required: No
    Description: Callback function that will be called when the menu is opened. This event fires right before the menu is displayed.
```

--------------------------------

### Configure Custom Icons in app.json

Source: https://github.com/react-native-menu/menu/blob/master/README.md

This JSON configuration shows how to use an Expo config plugin to copy custom drawable XML files to the Android drawable folder for use with React Native Menu.

```json
{
  "expo": {
    "plugins": [
      [
        "./plugin/withAndroidDrawables",
        {
          "drawableFiles": [ "./assets/my_icon.xml" ]
        }
      ]
    ]
  }
}
```

--------------------------------

### MenuAttributes Type Definition

Source: https://github.com/react-native-menu/menu/blob/master/README.md

Defines the stylistic attributes for a menu action, allowing it to be marked as destructive, disabled, or hidden. These attributes control the visual presentation and interactivity of the menu item.

```typescript
type MenuAttributes = {
  /**
   * An attribute indicating the destructive style.
   */
  destructive?: boolean;
  /**
   * An attribute indicating the disabled style.
   */
  disabled?: boolean;
  /**
   * An attribute indicating the hidden style.
   */
  hidden?: boolean;
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.