Easily render header buttons for react-navigation
MIT License
Published by vonovak about 4 years ago
Published by vonovak about 4 years ago
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)
Published by vonovak about 4 years ago
feat: added support for destructive actions in overflowMenuPressHandlerActionSheet #84
this release requires you use RN >= 0.62
Published by vonovak about 4 years ago
fix: do not render OverflowMenu if there are no valid children (#85)
Published by vonovak over 4 years ago
Published by vonovak over 4 years ago
Published by vonovak over 4 years ago
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!
✅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:
OverflowMenu
componentOverflowMenu
✅Experimental web support
overflowMenuPressHandlerDropdownMenu
as onPress
to OverflowMenu
)✅CI improvements
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
componentoverflowButtonWrapperStyle
-> pass style
to OverflowMenu
onOverflowMenuPress
-> pass onPress
to OverflowMenu
overflowButtonTestID
-> pass testID
to OverflowMenu
buttonWrapperStyle
-> renamed to style
Item
or HiddenItem
to be disabled, pass disabled={true}
propsee https://github.com/vonovak/react-navigation-header-buttons#known-issues
Published by vonovak over 4 years ago
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
Published by vonovak almost 5 years ago
Published by vonovak about 5 years ago
Published by vonovak about 5 years ago
If you have any other TS problem, please contribute a PR! I'll ship it quickly :)
Published by vonovak over 5 years ago
fixes: support for arrays of styles in TypeScript (#52)
Published by vonovak over 5 years ago
Welcome to new major release!
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.
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.HiddenItem
componentIf 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={...} />
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
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!
Published by vonovak over 5 years ago
Published by vonovak over 5 years ago
fixes flow typing for Flow v0.85 #41 by @gaykov
Published by vonovak about 6 years ago
Published by vonovak over 6 years ago
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
propIf 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.