Make it possible for a screen to set gesturesEnabled (#385)

Closes #292
This commit is contained in:
Ashoat 2017-02-20 16:22:15 -05:00 committed by Satyajit Sahoo
parent 257ce3eff9
commit 2d0a7fa4ed
3 changed files with 26 additions and 13 deletions

View File

@ -126,6 +126,8 @@ All `navigationOptions` for the `StackNavigator`:
- `style` - Style object for the navigation bar - `style` - Style object for the navigation bar
- `titleStyle` - Style object for the title component - `titleStyle` - Style object for the title component
- `tintColor` - Tint color for the header - `tintColor` - Tint color for the header
- `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 ### Navigator Props

View File

@ -167,6 +167,14 @@ export type DrawerConfig = {
label?: string; label?: string;
}; };
export type CardStackConfig = {
/**
* Whether you can use gestures to dismiss this screen.
* Defaults to true on iOS, false on Android.
*/
gesturesEnabled?: bool;
};
export type NavigationScreenOptions = { export type NavigationScreenOptions = {
/** /**
* Title is rendered by certain navigators, e.g. the tab navigator, * Title is rendered by certain navigators, e.g. the tab navigator,
@ -185,6 +193,10 @@ export type NavigationScreenOptions = {
* Options passed to the drawer for this screen. * Options passed to the drawer for this screen.
*/ */
drawer?: NavigationScreenOption<DrawerConfig>; drawer?: NavigationScreenOption<DrawerConfig>;
/**
* Options passed to the card stack for this screen.
*/
cardStack?: NavigationScreenOption<CardStackConfig>;
}; };
export type NavigationScreenConfig = { export type NavigationScreenConfig = {

View File

@ -51,11 +51,6 @@ type Props = {
onTransitionEnd?: () => void, onTransitionEnd?: () => void,
style: Style, style: Style,
gestureResponseDistance?: ?number, gestureResponseDistance?: ?number,
/**
* If true, enable navigating back by swiping (see CardStackPanResponder).
* TODO move this to TransitionConfig.
*/
gesturesEnabled: ?boolean,
/** /**
* Optional custom animation when transitioning between screens. * Optional custom animation when transitioning between screens.
*/ */
@ -64,7 +59,6 @@ type Props = {
type DefaultProps = { type DefaultProps = {
mode: 'card' | 'modal', mode: 'card' | 'modal',
gesturesEnabled: boolean,
headerComponent: ReactClass<*>, headerComponent: ReactClass<*>,
}; };
@ -116,11 +110,6 @@ class CardStack extends Component<DefaultProps, Props, void> {
*/ */
transitionConfig: PropTypes.func, transitionConfig: PropTypes.func,
/**
* Enable gestures. Default value is true on iOS, false on Android.
*/
gesturesEnabled: PropTypes.bool,
/** /**
* The navigation prop, including the state and the dispatcher for the back * The navigation prop, including the state and the dispatcher for the back
* action. The dispatcher must handle the back action * action. The dispatcher must handle the back action
@ -149,7 +138,6 @@ class CardStack extends Component<DefaultProps, Props, void> {
static defaultProps: DefaultProps = { static defaultProps: DefaultProps = {
mode: 'card', mode: 'card',
gesturesEnabled: Platform.OS === 'ios',
headerComponent: Header, headerComponent: Header,
}; };
@ -343,7 +331,18 @@ class CardStack extends Component<DefaultProps, Props, void> {
let panHandlers = null; let panHandlers = null;
if (this.props.gesturesEnabled) { const cardStackConfig = this.props.router.getScreenConfig(
props.navigation,
'cardStack'
) || {};
// On iOS, the default behavior is to allow the user to pop a route by
// swiping the corresponding Card away. On Android this is off by default
const gesturesEnabledConfig = cardStackConfig.gesturesEnabled;
const gesturesEnabled = typeof gesturesEnabledConfig === 'boolean' ?
gesturesEnabledConfig :
Platform.OS === 'ios';
if (gesturesEnabled) {
let onNavigateBack = null; let onNavigateBack = null;
if (this.props.navigation.state.index !== 0) { if (this.props.navigation.state.index !== 0) {
onNavigateBack = () => this.props.navigation.dispatch( onNavigateBack = () => this.props.navigation.dispatch(