diff --git a/docs/api/navigators/StackNavigator.md b/docs/api/navigators/StackNavigator.md index 39ac2160a6..ed6457d16c 100644 --- 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 index 2a17b0c2cd..7588edaa8c 100644 --- a/src/views/Header.js +++ b/src/views/Header.js @@ -39,6 +39,7 @@ type SubViewRenderer = (subViewProps: SubViewProps) => ?React.Element; 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 { 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 { 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 { return ( void, + pressColorAndroid?: ?string, title?: ?string, tintColor?: ?string, truncatedTitle?: ?string, @@ -23,6 +24,7 @@ type Props = { }; type DefaultProps = { + pressColorAndroid: ?string, tintColor: ?string, truncatedTitle: ?string, }; @@ -34,6 +36,7 @@ type State = { class HeaderBackButton extends React.PureComponent { static propTypes = { onPress: PropTypes.func.isRequired, + pressColorAndroid: PropTypes.string, title: PropTypes.string, tintColor: PropTypes.string, truncatedTitle: PropTypes.string, @@ -41,6 +44,7 @@ class HeaderBackButton extends React.PureComponent { }; static defaultProps = { + pressColorAndroid: 'rgba(0, 0, 0, .32)', tintColor: Platform.select({ ios: '#037aff', }), @@ -59,7 +63,7 @@ class HeaderBackButton extends React.PureComponent { }; 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 { diff --git a/src/views/TouchableItem.js b/src/views/TouchableItem.js index 81c74e6b2c..01f24e362c 100644 --- 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 {