Add pressColor to StackNavigator header options (#926)

* Add pressColor to StackNavigator header options * Rename pressColor -> pressColorAndroid for StackNavigator
react-navigation · Apr 7, 2017 · 31c5384 · 31c5384
1 parent 2974700
commit 31c5384
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/docs/api/navigators/StackNavigator.md b/docs/api/navigators/StackNavigator.md
@@ -126,7 +126,8 @@ All `navigationOptions` for the `StackNavigator`:
   - `style` - Style object for the header
   - `titleStyle` - Style object for the title component
   - `tintColor` - Tint color for the header
-- `cardStack` - a config object for the card stack:
+  - `pressColorAndroid` - Color for material ripple (Android >= 5.0 only)
+  - `cardStack` - a config object for the card stack:
   - `gesturesEnabled` - Whether you can use gestures to dismiss this screen. Defaults to true on iOS, false on Android
 
 ### Navigator Props

diff --git a/src/views/Header.js b/src/views/Header.js
@@ -39,6 +39,7 @@ type SubViewRenderer = (subViewProps: SubViewProps) => ?React.Element<any>;
 export type HeaderProps = NavigationSceneRendererProps & {
   mode: HeaderMode,
   onNavigateBack?: () => void,
+  pressColorAndroid?: string,
   renderLeftComponent: SubViewRenderer,
   renderRightComponent: SubViewRenderer,
   renderTitleComponent: SubViewRenderer,
@@ -108,6 +109,14 @@ class Header extends React.PureComponent<void, HeaderProps, HeaderState> {
     return undefined;
   }
 
+  _getHeaderPressColorAndroid(navigation: Navigation): ?string {
+    const header = this.props.router.getScreenConfig(navigation, 'header');
+    if (header && header.pressColorAndroid) {
+      return header.pressColorAndroid;
+    }
+    return undefined;
+  }
+
   _getHeaderTitleStyle(navigation: Navigation): Style {
     const header = this.props.router.getScreenConfig(navigation, 'header');
     if (header && header.titleStyle) {
@@ -149,6 +158,7 @@ class Header extends React.PureComponent<void, HeaderProps, HeaderState> {
       return null;
     }
     const tintColor = this._getHeaderTintColor(props.navigation);
+    const pressColorAndroid = this._getHeaderPressColorAndroid(props.navigation);
     const previousNavigation = addNavigationHelpers({
       ...props.navigation,
       state: props.scenes[props.scene.index - 1].route,
@@ -160,6 +170,7 @@ class Header extends React.PureComponent<void, HeaderProps, HeaderState> {
     return (
       <HeaderBackButton
         onPress={props.onNavigateBack}
+        pressColorAndroid={pressColorAndroid}
         tintColor={tintColor}
         title={backButtonTitle}
         width={width}

diff --git a/src/views/HeaderBackButton.js b/src/views/HeaderBackButton.js
@@ -16,13 +16,15 @@ import TouchableItem from './TouchableItem';
 
 type Props = {
   onPress?: () => void,
+  pressColorAndroid?: ?string,
   title?: ?string,
   tintColor?: ?string,
   truncatedTitle?: ?string,
   width?: ?number,
 };
 
 type DefaultProps = {
+  pressColorAndroid: ?string,
   tintColor: ?string,
   truncatedTitle: ?string,
 };
@@ -34,13 +36,15 @@ type State = {
 class HeaderBackButton extends React.PureComponent<DefaultProps, Props, State> {
   static propTypes = {
     onPress: PropTypes.func.isRequired,
+    pressColorAndroid: PropTypes.string,
     title: PropTypes.string,
     tintColor: PropTypes.string,
     truncatedTitle: PropTypes.string,
     width: PropTypes.number,
   };
 
   static defaultProps = {
+    pressColorAndroid: 'rgba(0, 0, 0, .32)',
     tintColor: Platform.select({
       ios: '#037aff',
     }),
@@ -59,7 +63,7 @@ class HeaderBackButton extends React.PureComponent<DefaultProps, Props, State> {
   };
 
   render() {
-    const { onPress, width, title, tintColor, truncatedTitle } = this.props;
+    const { onPress, pressColorAndroid, width, title, tintColor, truncatedTitle } = this.props;
 
     const renderTruncated = this.state.initialTextWidth && width
       ? this.state.initialTextWidth > width
@@ -69,6 +73,7 @@ class HeaderBackButton extends React.PureComponent<DefaultProps, Props, State> {
       <TouchableItem
         delayPressIn={0}
         onPress={onPress}
+        pressColor={pressColorAndroid}
         style={styles.container}
         borderless
       >

diff --git a/src/views/TouchableItem.js b/src/views/TouchableItem.js
@@ -26,14 +26,14 @@ type Props = {
   onPress: Function,
   delayPressIn?: number;
   borderless?: boolean;
-  pressColor?: string;
+  pressColor?: ?string;
   activeOpacity?: number;
   children?: React.Element<*>;
   style?: Style;
 };
 
 type DefaultProps = {
-  pressColor: string;
+  pressColor: ?string;
 };
 
 export default class TouchableItem extends Component<DefaultProps, Props, void> {