React-native-router-flux: Disable gesture back action

[AlmogRnD]

In V4 it would be good there was an option to disable the gesture back button for a specific scene. For example, I have my user login scene and then my home scene once a user login he is taken to the home scene but then he can gesture back to the login.

[alexchia]

you can put panHandlers={null} in a parent/root Scene to disable this behavior.

[AlmogRnD]

I just tested panHandlers={null} and it does not work, @aksonov can you reopen this.

[aksonov]

Fork & reproduce it with Example project.

[abeltje1]

I've also tried panHandlers={null} but it's not working. On another note: is it possible to only disable certain scenes within a parent scene? (i.e. I have 3 child-scenes and want only two of them to have the swipe-back)?

[abeltje1]

Nevermind, It was a mistake on my end: everything works great, sorry!

[themakerman]

@abeltje1 how did you solved it? Can you please help me out? Here is my code.
<Scene key="root" panHandlers={null}> <Scene key="splash" component={SplashScreen} initial /> <Scene key="Screen1" component={Screen1} /> <Scene key="Screen2" component={Screen2} /> </Scene> </Router>

I dont user to go from Screen1 back to SplashScreen. How can i do that?

[abeltje1]

You mean with swipe right? or just in general no back-button?

try setting panHandlers={null} on screen1

[themakerman]

@abeltje1 In general no back button at all. Back button should be only at Screen 2. So actual navigation will be between screen 1 and screen2. Splashscreen will be in its own zone.

panHandlers={null} doesn't solves the issue.

<Router>
      <Scene key="root">
          <Scene key="splash" component={SplashScreen} initial />
          <Scene key="Screen1" component={Screen1} panHandlers={null} />
          <Scene key="Screen2" component={Screen2} />
      </Scene>
</Router>

I used to achieve this in previous version of RNRF using Scene buckets. But in this version i cannot write nested scenes.

[abeltje1]

panHandler={null} is for touchevents. If you want to disable the back button you should use the back property on the scene, or if you want to hide the navbar altogether you should use hideNavBar

[themakerman]

@abeltje1 if i use hideNavBar i can still go back to the splash screen which i don't want. back property is of no help. Can you give me any more pointers?

[abeltje1]

I'll try, though I'm confused a lot of times with RNRF myself - just started developing with RN and Redux and it's a little much, so excuse me if I'm wrong.

Let me ask a few questions to understand better what's going on, okay?

1: When in screen 1, can you still swipe from the left side of the screen to go to the splash screen?
2: If you use hideNavBar do you still see a back button?

I tried it myself and with hideNavBar there is no back button left. Secondly I also tried panHandlers={null} and that disables the swipe. To me it looks like this piece of code below should disable going back altogether. can you confirm this does not work and if that's the case: can you tell me which back option still works (back button in header OR swipe OR both)?

<Router>
      <Scene key="root">
          <Scene key="splash" component={SplashScreen} initial />
          <Scene key="Screen1" component={Screen1} panHandlers={null} hideNavBar />
          <Scene key="Screen2" component={Screen2} />
      </Scene>
</Router>

cheers

[themakerman]

@abeltje1 Are you using the beta version?
For me type="reset" prop worked like a charm. panHandlers are not working for me.

<Router>
      <Scene key="root">
          <Scene key="splash" component={SplashScreen} initial />
          <Scene key="Screen1" component={Screen1} type="reset" hideNavBar />
          <Scene key="Screen2" component={Screen2} />
      </Scene>
</Router>

[abeltje1]

Works like a charm indeed (even though panHandlers worked for me too). do you perhaps know how to disable the drawer but not the swipe left? @themakerman

[aksonov]

Sorry, it seems not supported yet by react-navigation (disable gestures for drawer) https://github.com/react-community/react-navigation/issues/390

[ghost]

type={ActionConst.RESET} in Scene

[SourceCipher]

@haythamakl solution works, but dont forget to import ActionConst from the react-native-router-flux

[yeomann]

carp:( nor type="rest" nor type={ActionConst.RESET} working for me. come on:(

EDIT: fixed in later releases :ok_hand:

[jituumaria]

@abeltje1 how did you solved it? Can you please help me out? Here is my code.

    <Scene key="root" panHandlers={null}>
         <Scene key="splash" component={SplashScreen} initial />
         <Scene key="Screen1" component={Screen1} />
         <Scene key="Screen2" component={Screen2} />
     </Scene>
   </Router>

I dont user to go from Screen1 back to SplashScreen. How can i do that?

you can use

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

[rodrigofbm]

Nothing work. Can someone help?

[yeomann]

what do you mean mate? @rodrigofbm both v3 and v4 works now. mind sharing your implementation? I am using type={ActionConst.RESET} in Scenes and it's been working since.

[rodrigofbm]

@yeomann Yeah! Work's, thanks por sharing!

[chirag773]

what do you mean mate? @rodrigofbm both v3 and v4 works now. mind sharing your implementation? I am using type={ActionConst.RESET} in Scenes and it's been working since.

I'm also facing the same problem

[sdv1812]

what do you mean mate? @rodrigofbm both v3 and v4 works now. mind sharing your implementation? I am using type={ActionConst.RESET} in Scenes and it's been working since.

I'm also facing the same problem

@chirag773 What problem are you facing? You can provide the prop type={ActionConst.RESET} to the scene from which you don't want to go back. You can also use Actions.reset('Screen1') in the SplashScreen component (from the example above).

[FaizalMalik]

@aksonov I am also facing the same issue

````


component={Login}
initial={!token}
hideNavBar={true}
key='Login'
title='Login'
/>
hideNavBar
key="drawer"
contentComponent={LeftSideMenu}
drawerImage={MenuIcon}
drawerWidth={300}
>
component={Home}
hideNavBar={false}
key='Home'
title='Home'
type={ActionConst.RESET}
/>

                    </Drawer>    
                </Scene>
            </RouterWithRedux>

````

I have given type={ActionConst.RESET} in Home Scene, Still after login when i press back , It take User Back to Login screen.

I have two screens - Login and Home. after successful login , do not take user back to Login screen .

Can some one help me ?

[jituumaria]

Use-- Actions.your screen kry();

On Wed, Mar 6, 2019, 8:16 PM FaizalMalik [e-mail] wrote:

@aksonov https://github.com/aksonov I am also facing the same issue

component={Login}
initial={!token}
hideNavBar={true}
key='Login'
title='Login'
/>
hideNavBar
key="drawer"
contentComponent={LeftSideMenu}
drawerImage={MenuIcon}
drawerWidth={300}
>
component={Home}
hideNavBar={false}
key='Home'
title='Home'
type={ActionConst.RESET}
/>

                    </Drawer>
                </Scene>
            </RouterWithRedux>

I have given type={ActionConst.RESET} in Home Scene, Still after login
when i press back , It take User Back to Login screen.

I have two screens - Login and Home. after successful login , do not take
user back to Login screen .

Can some one help me ?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/2006#issuecomment-470127748,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZy1DqPl2TWFHuf6om7ZVhQxXTY5N7Q4ks5vT9TcgaJpZM4OTmbX
.

[surbhitrao]

This is what worked for me:

https://stackoverflow.com/a/61349171/5950360