feat: add presentMenu and closeMenu calls for overflowMenuPressHandler

.github/actions/setup/action.yml

@@ -5,9 +5,9 @@ runs:
  using: composite
  steps:
  - name: Setup Node.js
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
  with:
- node-version-file: .nvmrc
+ node-version: 'lts/*'
 
  - name: Get yarn cache directory path
  id: yarn-cache-dir-path

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
 
  - name: Setup
  uses: ./.github/actions/setup
@@ -27,7 +27,7 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
 
  - name: Setup
  uses: ./.github/actions/setup
@@ -39,7 +39,7 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
 
  - name: Setup
  uses: ./.github/actions/setup

README.md

@@ -258,6 +258,14 @@ You can fully customize what it renders inside of the `PlatformPressable` using
 
 ## Recipes
 
+#### Closing the overflow menu from `overflowMenuPressHandlerDropdownMenu` manually
+
+`overflowMenuPressHandlerDropdownMenu` supports rendering custom items in the menu. In your item's onPress handler, you can call `closeMenu` to close the menu manually.
+
+```ts
+const { closeMenu } = useOverflowMenu();
+```
+
 #### Customizing the overflow menu
 
 The default handler for overflow menu on iOS is `overflowMenuPressHandlerActionSheet`.

example/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

example/package.json

@@ -15,20 +15,20 @@
  "@react-navigation/native": "^6.1.6",
  "@react-navigation/native-stack": "^6.9.12",
  "@react-navigation/stack": "^6.3.16",
- "expo": "~49.0.13",
- "expo-splash-screen": "~0.20.5",
- "expo-status-bar": "~1.6.0",
+ "expo": "~50.0.6",
+ "expo-splash-screen": "~0.26.4",
+ "expo-status-bar": "~1.11.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
- "react-native": "0.72.5",
- "react-native-gesture-handler": "~2.12.0",
- "react-native-safe-area-context": "4.6.3",
- "react-native-screens": "~3.22.0",
+ "react-native": "0.73.4",
+ "react-native-gesture-handler": "~2.14.0",
+ "react-native-safe-area-context": "4.8.2",
+ "react-native-screens": "~3.29.0",
  "react-native-web": "~0.19.6"
  },
  "devDependencies": {
  "@babel/core": "^7.20.0",
- "@expo/webpack-config": "^19.0.0",
+ "@expo/webpack-config": "~19.0.1",
  "babel-loader": "^8.1.0",
  "babel-plugin-module-resolver": "^4.1.0"
  },

example/src/screens/HomeScreen.tsx

@@ -33,7 +33,7 @@ export function HomeScreen({ navigation }: ScreenProps<'HomeScreen'>) {
  const { toggleTheme } = React.useContext(ThemeContext);
 
  return (
- <ScrollView>
+ <ScrollView contentContainerStyle={{ rowGap: 10 }}>
  <Text style={{ margin: 15 }}>Explore possible usages with:</Text>
  <Button
  onPress={() => _navigateTo('UsageWithIcons')}
@@ -47,6 +47,10 @@ export function HomeScreen({ navigation }: ScreenProps<'HomeScreen'>) {
  onPress={() => _navigateTo('UsageWithCustomOverflow')}
  title="Custom overflow menu action"
  />
+ <Button
+ onPress={() => _navigateTo('UsageNativeMenu')}
+ title="Native menu overflow"
+ />
  <Button
  onPress={() => _navigateTo('UsageWithOverflowComplex')}
  title="Overflow menu - all handlers"
@@ -67,10 +71,7 @@ export function HomeScreen({ navigation }: ScreenProps<'HomeScreen'>) {
  onPress={() => _navigateTo('UsageCustom')}
  title="Custom elements"
  />
- <Button
- onPress={() => _navigateTo('UsageNativeMenu')}
- title="Native menu overflow"
- />
+
  <Button
  onPress={toggleTheme}
  title="Toggle Theme (ripple, text and icon color changes)"

example/src/screens/UsageWithOverflowComplex.tsx

@@ -10,6 +10,7 @@ import {
  overflowMenuPressHandlerDropdownMenu,
  HiddenItemProps,
  OnOverflowMenuPressParams,
+ useOverflowMenu,
 } from 'react-navigation-header-buttons';
 import type { ScreenProps } from '../NavTypes';
 import { Button } from '../components/PaddedButton';
@@ -30,10 +31,22 @@ const handlers = {
  overflowMenuPressHandlerActionSheet,
  overflowMenuPressHandlerPopupMenu,
  custom: function custom(obj: OnOverflowMenuPressParams) {
- alert('you custom function will receive:' + Object.keys(obj));
+ alert('you custom function will receive:' + Object.keys(obj).join(', '));
  },
 };
 
+const CustomViewInOverflow = () => {
+ const { closeMenu } = useOverflowMenu();
+ return (
+ <View style={{ backgroundColor: 'orange', maxWidth: 200 }}>
+ <Text onPress={closeMenu}>
+ custom view that will only be considered for
+ overflowMenuPressHandlerDropdownMenu
+ </Text>
+ </View>
+ );
+};
+
 export function UsageWithOverflowComplex({
  navigation,
 }: ScreenProps<'UsageWithOverflowComplex'>) {
@@ -64,12 +77,7 @@ export function UsageWithOverflowComplex({
  onPress={() => alert('hidden4')}
  />,
  ]}
- <View style={{ backgroundColor: 'orange', maxWidth: 200 }}>
- <Text>
- custom view that will only be considered for
- overflowMenuPressHandlerDropdownMenu
- </Text>
- </View>
+ <CustomViewInOverflow />
  </OverflowMenu>
  ),
  });