mirror of
https://github.com/status-im/react-navigation.git
synced 2025-02-25 01:28:16 +00:00
Make it possible for a screen to set gesturesEnabled (#385)
Closes #292
This commit is contained in:
parent
257ce3eff9
commit
2d0a7fa4ed
@ -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
|
||||||
|
|
||||||
|
@ -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 = {
|
||||||
|
@ -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(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user