React-native-router-flux: Forbid swiping back

[ylquankai]

How to forbid swiping back for a scene ?

[aksonov]

Check https://github.com/ericvicenti/navigation-rfc/issues/49

[5amfung]

@aksonov How do I pass null to panHandlers?

Per https://github.com/ericvicenti/navigation-rfc/issues/49#issuecomment-200945651 the gesture can be disabled by setting panHandlers to null. When I have a scene that pushed from bottom to top using direction='vertical', I don't want users to swipe down to pop the scene.

<NavigationCard panHandlers={null}/>

[aksonov]

Looks like it is not in 0.22 release. Anyway i will post version that pass panHandlers to NavigationCard.

[fforres]

Awesome @aksonov :+1: !

[sslash]

I also have this problem with the 3.x version. A bit annoying if you are on a map screen. So the sollution will be to pass panHandlers={null} down a Scene?

[aksonov]

Yes. However 0.22 doesn't support passing panHandlers yet, probably 0.23 will.

[sslash]

Okey. is there any other way to accomplish this now? We sort of rely on this in order to upgrade to 3.x

[aksonov]

Yes, use your own NavigationCard, AnimatedNavigationView and your renderer instead of DefaultRenderer.

[sslash]

Okey, thanks!

[SudoPlz]

@sslash If you do this can you please post it back in this issue so that we can also reuse your code please?
Thanks!

[sslash]

Yes absolutely. I have postponed the task however, not sure when I/we will start, but when we do then yes

[fforres]

Thanks mate @sslash

[AlexDM0]

For me it would be great just to change the pan detector to be on the left half of the screen. iOS sliders now go to the previous page when I decrease their value...

[mvaivre]

I'm in the same situation than @sslash : I've a full screen map and I can't interact with it after having a Scene change. So it would be very nice to have a way to set panHandlers={null} for a scene!

[brien-crean]

@mvaivre to disable swiping back, passing panHandlers={null} worked for me, e.g:
<Scene key="modal" component={Modal} panHandlers={null}/>

[SudoPlz]

@brien-crean on which react-native and react-native-router-flux versions?

[brien-crean]

I am using
react-native: 0.23.1
react-native-router-flux: 3.2.8

[cridenour]

Another solution is to make sure your components don't let go of the panResponder. See https://github.com/jeanregisser/react-native-slider/pull/28

[mvaivre]

@brien-crean: indeed panHandlers={null} disable the swiping back, but one of the component still continues to "steal" the pan action, as stated by @cridenour, so I can't interact with my map.

[brien-crean]

@mvaivre interesting, I am not using any map components at the minute. It looks like for a slider component, RNv0.24 will include a fix for the component letting go of the panResponder. I wonder if something similar can/should be implemented for a map component?

See 52ddfd9

[cridenour]

Unfortunately I don't believe the default MapView uses the JS gesture system AFAIK.

[wzywno]

I am using

    "react": "^0.14.8",
    "react-native": "^0.24.1",

and I set panHandlers={null} in my Scene definition with map view. And it seems to work, swiping back is no longer posssible.

[wzywno]

little update,

panHandlers={null}

breaks the navbar buttons. Instead I added fake implementation of panHandlers to scene with map.

var _panResponder = PanResponder.create({
        onMoveShouldSetPanResponder: (e, gestureState) => {},
    onMoveShouldSetPanResponderCapture: (e, gestureState) => {},
    onStartShouldSetPanResponder: (e, gestureState) => {},
    onStartShouldSetPanResponderCapture: (e, gestureState) => {},
    onPanResponderReject: (e, gestureState) => {},
    onPanResponderGrant: (e, gestureState) => {},
    onPanResponderStart: (e, gestureState) => {},
    onPanResponderEnd: (e, gestureState) => {},
    onPanResponderRelease: (e, gestureState) => {},
    onPanResponderMove: (e, gestureState) => {},
    onPanResponderTerminate: (e, gestureState) => {},
    onPanResponderTerminationRequest: (e, gestureState) => {},
    onShouldBlockNativeResponder: (e, gestureState) => {},
  });

and

<Scene key="MapView" panHandlers={_panResponder.panHandlers} ...

[dalmeria]

Thanks. "panHandlers={null}" works.

[willyyang]

"react": "15.2.1",
"react-native": "0.30.0",
"react-native-router-flux": "^3.35.0"

panHandlers={null} does not work for me. Anyone else have this issue?

[sineer]

Looks like it's broken for me too.
"react": "15.3.2",
"react-native": "0.33.0",
"react-native-router-flux": "^3.35.0",

in the Example I can still swipe back from Login2 screen for instance even too panHandler=null in login2 scene.

[willyyang]

@sineer I used hideNavBar= {true} instead

[sineer]

@willyyang It's two different thing no?

panHandler is for swiping gesture to pop the scene and NavBar is the header section with title.

I tried with both NavBar true/false set for Login2 scene or it's parent and panHandler is set to null yet I can always swipe my way back a scene when direction="vertical"... Anyway not a big deal for me right now just a heads up I guess. maybe I am doing something wrong too I'm very fresh using this native stuff and using it through clojurescript also...

[uc-asa]

Thanks, brien-crean.
<Scene key="modal" component={Modal} panHandlers={null}/>
It works I'm using Route some thing like that.
<Route panHandlers={null} key="home" component={Home} />

[wachunei]

What about temporary removing panHandlers depending on scene's component state?

[redvulps]

is there a way to disable the pan handlers when calling a specific action? Like:

Actions.myAction({ panHandlers: null })

Using version 3.37.0

[wachunei]

@redvulps you should set them as null when defining your scenes.

<Scene key="myAction" panHandlers={null} />

[gigeos]

To keep platforms' gesture-based navigation, I do:

const activeBackGesture = (Platform.OS ==='android') ? null : undefined;
...
<Scene key="myAction" panHandlers={activeBackGesture} />

[jituumaria]

is there a way to disable the pan handlers on react-native-router-flux

key="your-key"
component={your-component}
title="your-title"
type="replace"
/>