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

Question

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?

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...