fix passing props to HeaderButton

Author: vonovak

README.md

@@ -64,13 +64,13 @@ static navigationOptions = {
 
 `HeaderButton` accepts:
 
-| prop and type                           | description                                                                                                                                     | note                                                                                                                                                           |
-| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| IconComponent?: React.ComponentType<\*> | component to use for the icons, foe example from `react-native-vector-icons`                                                                    |                                                                                                                                                                |
-| iconSize?: number                       | iconSize                                                                                                                                        |                                                                                                                                                                |
-| color?: string                          | color of icons and buttons                                                                                                                      |                                                                                                                                                                |
-| touchableBackground?: any               | the lib internally uses `react-native-platform-touchable` for rendering touchables. You may use this prop to specify the android ripple effect. | Defaults to `Touchable.SelectableBackgroundBorderless()`, valid values are [here](https://github.com/react-community/react-native-platform-touchable#statics). |
-| touchableForeground?: any               | the lib internally uses `react-native-platform-touchable` for rendering touchables. You may use this prop to specify the android ripple effect. | Not defined by default, valid values are [here](https://github.com/react-community/react-native-platform-touchable#statics).                                   |
+| prop and type                           | description                                                                  | note |
+| --------------------------------------- | ---------------------------------------------------------------------------- | ---- |
+| IconComponent?: React.ComponentType<\*> | component to use for the icons, foe example from `react-native-vector-icons` |      |
+| iconSize?: number                       | iconSize                                                                     |      |
+| color?: string                          | color of icons and buttons                                                   |      |
+
+You may also pass other props that will be passed to the underlying `react-native-platform-touchable`. For example, pass [`background`](https://github.com/react-community/react-native-platform-touchable#additional-props-used-by-touchablenativefeedback--default-android) prop for different ripple effects.
 
 Please note that `HeaderButton` also requires other props to function correctly. Some of these props are passed from `<Item .. />` (such as `iconName`) and also `<HeaderButtons ... />`. When wrapping `HeaderButton` it is thus important to not forget to pass down all props the wrapping component receives (this is easy using the spread operator), as documented in the [quick example](#quick-example).
 

example/navbar-buttons-demo/screens/UsageCustomRipple.js

@@ -10,7 +10,7 @@ import Touchable from 'react-native-platform-touchable';
 const DisableableHeaderButton = props => (
   <HeaderButton
     {...props}
-    touchableBackground={Touchable.Ripple('red', true)}
+    background={Touchable.Ripple('red', true)}
     IconComponent={Ionicons}
     iconSize={23}
     color="blue"

src/HeaderButton.js

@@ -28,16 +28,15 @@ export type VisibleButtonProps = $Exact<{
 }>;
 
 type OtherProps = {
-  touchableBackground: any,
-  touchableForeground: any,
+  background: any,
   getButtonElement: VisibleButtonProps => React.Element<any>,
 };
 
 export class HeaderButton extends React.PureComponent<
   HeaderButtonProps & VisibleButtonProps & OtherProps
 > {
   static defaultProps = {
-    touchableBackground: Touchable.SelectableBackgroundBorderless(),
+    background: Touchable.SelectableBackgroundBorderless(),
   };
   render() {
     const {
@@ -46,28 +45,32 @@ export class HeaderButton extends React.PureComponent<
       testID,
       getButtonElement,
       ButtonElement: ButtonElementOverride,
-      touchableBackground,
-      touchableForeground,
+      background,
+      iconName,
+      title,
+      buttonStyle,
+      IconComponent,
+      iconSize,
+      color,
+      other,
     } = this.props;
 
-    const { iconName, title, buttonStyle, IconComponent, iconSize, color } = this.props;
-
     const ButtonElement =
       ButtonElementOverride ||
       getButtonElement({ iconName, title, buttonStyle, IconComponent, iconSize, color });
 
     return (
       <Touchable
-        background={touchableBackground}
-        foreground={touchableForeground}
+        background={background}
         disabled={!onPress}
         onPress={onPress}
         hitSlop={BUTTON_HIT_SLOP}
         style={[styles.buttonContainer, buttonWrapperStyle]}
         testID={testID}
+        {...other}
       >
         <View>{ButtonElement}</View>
-      </RenderedComponent>
+      </Touchable>
     );
   }
 }