react-navigation-header-buttons

New features

• ensure that on android, all touchables have the same ripple size (no matter if you have a small icon or large text label in it) which is closer to native behavior

Breaking

• touchables update (removed an old touchables impl)
• requires RN 63 / expo 39

fix: make dropdown menu work both in RN and expo (#89) - improves appearance of overflowMenuPressHandlerDropdownMenu
fix: Menu - catch up with RN paper (#79)
chore: specify peer dependencies (#92)

features

feat: added support for destructive actions in overflowMenuPressHandlerActionSheet #84

breaking

this release requires you use RN >= 0.62

fix: do not render OverflowMenu if there are no valid children (#85)

fixed bug

• do not assume OverflowMenu is always direct child of HeaderButtons #72

improvement

• add missing docs, improve error message: #71

Welcome to v4!

This is, from a fair part, a rewrite. The basic usage remains the same, so migration should not be too hard. If you're using Flow or Typescript, that will make it even easier - both typings should be solid!

Improvements

✅Greater component reuse across screens:

Previously, if you used eg. <HiddenItem title="search" iconName="ios-search" onPress={() => alert('search')} /> in one screen, you couldn't really use it in another one. Now you can - just create a component that wraps it, eg. like this:

const ReusableHiddenItem = ({ onPress }) => <HiddenItem title="hidden2" onPress={onPress} />;

✅New overflow menu handler: Material dropdown menu

This is material dropdown menu adapted from react-native-paper, credit for amazing job goes to them. This Menu is bundled in this library (no dependency on react-native-paper).

To use it, pass overflowMenuPressHandlerDropdownMenu as onPress to OverflowMenu (this is the default for Android and Web)

✅Cleaner api:

• new OverflowMenu component
• some props have been moved to OverflowMenu

✅Experimental web support

• for overflow menu, you need to use the Material Menu (pass overflowMenuPressHandlerDropdownMenu as onPress to OverflowMenu)

✅CI improvements

• Flow, Jest tests and ESLint run in CI. I'd like to check TS validity too (by checking the example project) - please open a PR if you're using TS.

Breaking Changes

Because so much has changed, this may not be complete list. Let me know if I forgot something.

❌ changed

• show prop is removed -> use Item or HiddenItem component
• overflowButtonWrapperStyle -> pass style to OverflowMenu
• onOverflowMenuPress -> pass onPress to OverflowMenu
• overflowButtonTestID -> pass testID to OverflowMenu
• buttonWrapperStyle -> renamed to style
• if you want an Item or HiddenItem to be disabled, pass disabled={true} prop

Known Issues

see https://github.com/vonovak/react-navigation-header-buttons#known-issues

fixes #61 (ripple not being shown), but may have the side effect of ripple being extended to beyond the border of the bounding view. Please double-check if this is what you want.

A better way to do this was proposed in react-native core: https://github.com/facebook/react-native/pull/28009

improvements

• Add export for defaultOnOverflowMenuPress to TS typings

• added HiddenItem class to TS typings (#55)

• improvement to TS types (#54)

If you have any other TS problem, please contribute a PR! I'll ship it quickly :)

fixes: support for arrays of styles in TypeScript (#52)

Welcome to new major release!

❌ Breaking

• The module no longer has a default export: HeaderButtons which was previously default export, is now a named export.

There are a bunch of named exports and I felt like it wasn't clear which export is the "main one", so I made them all named.

• default testID for overflow button is now exported from here. This is so that in e2e tests, by importing it, you depend just on the constant and not other React-related stuff from this lib.

🎉 New features

• new HiddenItem component

If you have a lot of code where you specify show="never" then you can make the code a little more straightforward:

<Item title="edit" show={Item.SHOW_NEVER} onPress={...} />
=>
<HiddenItem title="edit" onPress={...} />

🏋 Improvements

• easier customization of cancel button in iOS ActionSheets
  There were several requests for adding a overflowCancelButtonTitle prop that would customize the cancel button shown in the iOS Action Sheet. I didn't want to add such prop to the api, so I looked for another way - it is now possible to import the default overflow button menu press handlers and override the cancel label (and potentially other params if someone wants that). I hope this works well for you. Let me know if not :)

See the example

• some small improvements to how code is structured

It's possible that the TS typings are now broken, unfortunately I don't have time to verify them. Please send me a PR if you encounter a problem with TS.

Lastly, thank you for using this small package!

• uses the same default android ripple color as react-navigation ('rgba(0, 0, 0, .32)')

see example if you want to customize the ripple

• export more TS types - https://github.com/vonovak/react-navigation-header-buttons/pull/46

new features

• support for web through #44 - @azurechen

fixes flow typing for Flow v0.85 #41 by @gaykov

this release

• fixes flow errors
• removes StyleObj flow type in favor of ViewStyleProp which is present on latest RN versions (#31)
• fixes wrong destructuring here

• added TS typings, thanks to @aMarCruz

v2 includes a slightly redesigned api that allows for easier support of use cases such as disabled item state or custom ripple effect on the buttons. There are breaking changes, but if you followed the previous advice on "How to integrate in your project", migration should be easy. There are no changes to styling of the buttons.

Breaking:

• cancelButtonLabel prop was removed, provide custom onOverflowMenuPress if you relied on this prop.

to get the same behavior and customize the cancel label used on ActionSheetIOS, the replacement will look more or less like this

const onOverflowMenuPressIOS = ({ hiddenButtons }) => {
  let actionTitles = hiddenButtons.map(btn => btn.props.title);
  actionTitles.push('your cancel label');

  ActionSheetIOS.showActionSheetWithOptions(
    {
      options: actionTitles,
      cancelButtonIndex: actionTitles.length - 1,
    },
    (buttonIndex: number) => {
      if (buttonIndex !== actionTitles.length - 1) {
        hiddenButtons[buttonIndex].props.onPress();
      }
    }
  );
};

• IconElement was renamed to ButtonElement
• HeaderButtons expects different props now - instead of IconComponent, iconSize and color you're expected to pass HeaderButtonComponent prop

If you were using this library together with react-native-vector-icons, you will also be required to import HeaderButton and wrap it in your own component providing the IconComponent, iconSize and color props, as documented here.

Please see the example screens or run the improved example app.