UNPKG

@react-navigation/stack

Version:

Stack navigator component for iOS and Android with animated transitions and gestures

70 lines (63 loc) 3.53 kB
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /** * TouchableItem renders a touchable that looks native on both iOS and Android. * * It provides an abstraction on top of TouchableNativeFeedback and * TouchableOpacity. * * On iOS you can pass the props of TouchableOpacity, on Android pass the props * of TouchableNativeFeedback. */ import * as React from 'react'; import { Platform, TouchableNativeFeedback, TouchableOpacity, View } from 'react-native'; import BorderlessButton from './BorderlessButton'; const ANDROID_VERSION_LOLLIPOP = 21; export default class TouchableItem extends React.Component { render() { /* * TouchableNativeFeedback.Ripple causes a crash on old Android versions, * therefore only enable it on Android Lollipop and above. * * All touchables on Android should have the ripple effect according to * platform design guidelines. * We need to pass the background prop to specify a borderless ripple effect. */ if (Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP) { const _this$props = this.props, { style, pressColor, borderless, children } = _this$props, rest = _objectWithoutProperties(_this$props, ["style", "pressColor", "borderless", "children"]); return React.createElement(TouchableNativeFeedback, _extends({}, rest, { useForeground: TouchableNativeFeedback.canUseNativeForeground(), background: TouchableNativeFeedback.Ripple(pressColor, borderless) }), React.createElement(View, { style: style }, React.Children.only(children))); } else if (Platform.OS === 'ios') { return React.createElement(BorderlessButton, _extends({ hitSlop: { top: 10, bottom: 10, right: 10, left: 10 }, disallowInterruption: true, enabled: !this.props.disabled }, this.props), this.props.children); } else { return React.createElement(TouchableOpacity, this.props, this.props.children); } } } _defineProperty(TouchableItem, "defaultProps", { borderless: false, pressColor: 'rgba(0, 0, 0, .32)' }); //# sourceMappingURL=TouchableItem.js.map