How to prevent an React Native application from returning by clicking on the Backbutton using React Navigation

Asked

Viewed 2,028 times

0

Hello, I am creating an application in React Native, and for the browsing I have been working with the plugin React Navigation. The structure of my project is like this:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { FluidNavigator } from 'react-navigation-fluid-transitions';

// tela de splash
export default SplashScreen extends React.Component {
  componentDidMount = () => 
    setTimeout(() => this.props.navigation.navigate('Login'), 500);

  render = () => 
    <View>
    <Text>SplashScreen</Text>
  </View>;
}

// tela de login de usuario
export default LoginScreen extends React.Component {
  goToDashboard = () => this.props.navigation.navigate('Dashboard');
  goToRegister = () => this.props.navigation.navigate('Register');
  render = () =>
    <View>
      <Text>LoginScreen</Text>
      <Button onPress={goToDashboard} title="Sign in" />
      <Button onPress={goToRegister} title="Sign up" />
    </View>
  }
}

// tela de registro de usuario
export default RegisterScreen extends React.Component {
  render = () => <View><Text>RegisterScreen</Text></View>;
}

// tela de dashboard (após o usuário estar logado)
export default DashboardScreen extends React.Component {
  render = () => <View><Text>DashboardScreen</Text></View>;
}

// navigator contendo as telas
const Navigator = FluidNavigator({
  Splash: { screen: SplashScreen },
  Login: { screen: LoginScreen },
  Register: { screen: RegisterScreen },
  Dashboard: { screen: DashboardScreen }
})

export default App extends React.Component {
  render(){
    return <View><Navigator/></View>
  }      
}

My problem is navigational. When the user clicks the back button, it goes to the previous screen and it complicates me... I need the navigation to be in the following relation:

  • SplashScreen => LoginScreen
  • LoginScreen <=> RegisterScreen
  • LoginScreen => DashboardScreen
  • RegisterScreen => DashboardScreen

I even tried to reset the index using the NavigationActions but this hinders the animations that are on the screen (because of the react-navigation-fluid-transitions).

I also tried to block the Backbutton event as well as in some tutorials, only that if I lock it on the screen Screen, it starts to stick on all screens, preventing me from getting back to the Login screen on the Register screen and consequently to the other screens that will come in the application.

What I need to do to stop it (inside the screen I want to stop) so it can’t get back up 'X' screen?

react react-native react-navigation react-navigation-fluid-transitions
  • 1

    You have already tried to set on each page the return that each one should have?

  • did not understand... could you give me an example? I am new with React-Native and I really could not see what you told me...

  • 1

    So I usually directly determine the route you should follow by clicking the return button. You can do by adding the following code in your page’s constructor: BackHandler.addEventListener('hardwareBackPress', function() {&#xA; Actions.rota_que_deseja();&#xA; return true;&#xA; });

  • I tried to do something like this, but if I do it 1 time, the default function of go back and it doesn’t work normally. Sibem that I could force the navigation to come back with a this.props.navigation.navigatePrev()

  • 1

    Worked using the navigatePrev()?

1 answer

1


Based on what @sant0will said in the answers, I was able to "solve" the problem by adding on all screens a specific treatment for Backhandler, thus:

export default SplashScreen extends React.Component {
  //...
  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', () => { return true; });
  }
}

// tela de login de usuario
export default LoginScreen extends React.Component {
  //...
  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', () => { return true; });
  }
}

// tela de registro de usuario
export default RegisterScreen extends React.Component {
  //...
  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', () => { 
      this.props.navigation.navigate('Login');
      return true; 
    });
  }
}

// tela de dashboard (após o usuário estar logado)
export default DashboardScreen extends React.Component {
  //...
  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', () => { return true; });
  }
}

I honestly didn’t like to solve like this because I smell the "technical feature" but how it worked and how it will stay...

  • 1

    Boaaa, I’m glad it worked.

  • Partner! = D

Browser other questions tagged react react-native react-navigation react-navigation-fluid-transitions

You are not signed in. Login or sign up in order to post.