React-native-router-flux: How to increase swipe gesture back

[YuriyUlantsev]

How i can increase swipe gesture back ?
Do not start a gesture from the edge of the screen, 1/3 screen?

[haabnaseem]

i hope someone answers your question, i have been asking for this for a long time it seems there is no solution.

[rturk]

There is an example describing drawer menu usage

https://github.com/aksonov/react-native-router-flux/blob/b11a84962e4e4d9265770382b8859d21d1a12ea0/Example/components/NavigationDrawer.js

[haabnaseem]

@rturk hi the problem is we have to drag screen from edge to swipe back, and it's laggy compared to default navigator, any idea to improve that?

[haabnaseem]

@aksonov any suggestions ?

[jamielob]

I'm looking for the answer to this also. It looks like the default is set at 30, but it also looks like setting a prop of gestureResponseDistance should override that.

Looking at the code, I would expect the following to work:

<Scene
  key="gray"
  component={GrayScreen}
  title="Gray"
  gestureResponseDistance="200"
/>

The same way that adding a direction prop works.

[jamielob]

Ok, so I think one of the causes of this is currently because the version of react-native-experimental-navigation that RNRF uses is out of date. @aksonov - any blockers for updating it?

In the meantime, anyone wanting to make this change globally as a temporary hack can go into their node_modules/react-native-experimental-navigation/NavigationCardStackPanResponder.js and change this line to something higher (e.g. 100).

[aksonov]

Yes, RN did a lot of changes and nobody here don't have time to adopt it for RNRF. Feel free to submit PR to our navigation experimental fork to support this feature

Pavel.

11 окт. 2016 г., в 09:30, Jamie Loberman [email protected] написал(а):

Ok, so I think one of the causes of this is currently because the version of react-native-experimental-navigation that RNRF uses is out of date. @aksonov - any blockers for updating it?

In the meantime, anyone wanting to make this change globally as a temporary hack can go into their node_modules/react-native-experimental-navigation/NavigationCardStackPanResponder.js and change this line.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[jamielob]

@aksonov Thanks - happy to PR. Can you tell me why we have to have a react-native-experimental-navigation fork and not just import from react-native?

[ylukem]

I was struck by this issue as well and I wanted to share how I fixed it before a proper fix lands.

1. I created a patch (attached here) that changes the sensitivity to 100.

2. I added an install script to our package.json that applies the patch. Below is an example:

  "scripts": {
    "install": "git apply sensitivity.patch 2>/dev/null; echo Patched react-native-experimental navigation"
  }

Hope this helps someone.

EDIT: Don't do this, see @ethan605 below.

[ethan605]

Hi, I've found a (pretty simple) way to customize panHandlers without breaking any changes or hacking on react-native-router-flux forked react-native-experimental-navigation. It is tested with [email protected], [email protected] & [email protected]. All you need is import and pass getPanHandlers to your Scene's props.

/**
 * @providesModule AppRouter.getPanHandlers
 * @flow
 *
 * Custom pan handlers for react-native-router-flux
 * works with [email protected], [email protected], [email protected]
 */

// Use built-in NavigationExperimental comealong with react-native
import { Dimensions, NavigationExperimental } from 'react-native';
import { Actions } from 'react-native-router-flux';

const screenSize = Dimensions.get('window');

const {
  Card: {
    CardStackPanResponder: NavigationCardStackPanResponder
  }
} = NavigationExperimental;

const {
  Directions: {
    HORIZONTAL
  }
} = NavigationCardStackPanResponder;

const getPanHandlers = (props: Object) => {
  let { scene } = props;

  let direction = (scene.navigationState != null && scene.navigationState.direction != null)
    ? scene.navigationState.direction
    : HORIZONTAL;

  // By default, onNavigateBack() should be pop()
  // but we'll try to obtain current scene's custom onBack method
  let onNavigateBack = (scene.navigationState != null && scene.navigationState.onBack != null)
    ? scene.navigationState.onBack
    : Actions.pop;

  // Enlarge gesture response distance
  let gestureResponseDistance = direction == HORIZONTAL
    ? screenSize.width * 0.8
    : screenSize.height * 0.5;

  let customProps = Object.assign({}, props, { gestureResponseDistance, onNavigateBack });
  return direction == HORIZONTAL
    ? NavigationCardStackPanResponder.forHorizontal(customProps)
    : NavigationCardStackPanResponder.forVertical(customProps);
};

export default getPanHandlers;

Pass it to your Scene:

import getPanHandlers from './getPanHandlers';

...
  <Scene
    key={'root'}
    component={AppNavigation}
    getPanHandlers={getPanHandlers}
  />
...

[ylukem]

Woof. Thanks for this, @ethan605!

[robcalcroft]

@ethan605 great work that fixed #1474

[robcalcroft]

Still, would be nice to have a specific prop like backSwipeGestureEdgeRange @aksonov

[robcalcroft]

@ethan605 Annoyingly this breaks my swipe rows using https://github.com/jemise111/react-native-swipe-list-view, any idea why this could be? I can drag them the tiniest bit but the seem to have too much resistance and won't allow me to open them, its directly related to including the pan responders in the code

EDIT fixed it by changing the 0.8 value to be dynamic based on the scene

const horizontalGrabFactor = scene.navigationState.name === 'sceneWithSwipeRow' ? 0.2 : 0.8;

[ethan605]

@robcalcroft this is also a pain in my project ;(

The point is, in my opinions, that the PanResponder configs object for NavigationCardStack (which is based for Scene components) is at the highest priority in the pans stack. I've try something similar to touches swallow to override the navigation card handlers but no lucks. It seems that we have to sacrifice some scenes' gestures to wait until such mechanisms.

[robcalcroft]

@ethan605 I've actually found the code snippet I used works quite well, but I can see it not scaling very well!

[ethan605]

@robcalcroft I've updated my snippets here. Hope it helps :)

[booboothefool]

@ethan605 your code works great!

I am running into a small issue that seems pretty common. If a Scene has a horizontal ScrollView, the PanResponder will sometimes hijack it and end up doing the swipe to back gesture instead of scrolling the ScrollView.

Does anyone know of a way to disable the PanResponder on the current scene while a ScrollView is scrolling?

[mcmatan]

NavigationExperimental is deprecated on RN0.44 +, any idea how to use it on later versions?

[nonotest]

import NavigationExperimental from 'react-native-experimental-navigation' for anyone that needs this

[heyman333]

@ethan605
Hello. I am using versions [email protected] [email protected] [email protected]
And your code does not work properly in my project :(
cuz the [email protected] has no NavigationExperimental, I imported that from 'react-native-experimental-navigation'. can this cause problems?

[ethan605]

@heyman333 first of all at the moment of this issue, we were using RNRF's embedded NavigationExperimental, so there's no react-native-experimental-navigation imports.

Secondly, my snippet works with specified [email protected]; [email protected] & [email protected], so I doubt that it may break on newer packages.

Lastly, we've moved to use react-navigation for months, so sorry that can't help you out anymore

[heyman333]

I got workaround to solve this problem.
If you need to lengthen the swipeable distance. try the following

PHASE 1

fork a this Github repo and edit the code const RESPOND_POSITION_MAX_HORIZONTAL = 30; of NavigationCardStackPanResponder.js to the distance what you want.

PHASE 2

edit version information inpackage.json to your react-native-router-flux's dependency

PHASE 3

add react-native-experimental-navigation to your package.json and Replace the download path with your repository like this "react-native-experimental-navigation": "git+https://github.com/heyman333/react-native-experimental-navigation.git"

When you have done this, you can download the new repository of react-native-experimental-navigation