How to prevent a React Native application from returning when you click the BackButton using React Navigation

Question

How to prevent a React Native application from returning when you click the BackButton using React Navigation

Navigation

#1 by (1 votes)

0

Hello, I'm creating an application in React Native, and for the navigations I've been working with the React Navigation plugin. The structure of my project looks 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 in navigations. When the user clicks the back button, it goes to the previous screen and this complicates me ... I need the navigation to be in the following relation:

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

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

I've also tried to block the BackButton event as well as some tutorials, but if I block it on the Screen, it will start to crash on all screens, preventing me from being able to go back to the Login screen on the screen. Register and consequently to the other screens that will come in the application.

What do I need to do to prevent it (within the screen that I want to prevent) so that it can not go back to 'X' screen?

react-native react react-navigation react-navigation-fluid-transitions

asked by anonymous 01.11.2018 / 21:55

1 answer

Help with Header effects [closed] Use the contents of an input field in a JS function

score 1 · Accepted Answer

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

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 did not like to solve it because it smells like a "technical resource" but how it worked and how it will look ...