How to inhibit the "back" button in an React Native application using React-navigation-Fluid-Transitions

Question

I’m creating a mobile application that uses as a basis react-native. To make the transition between the screens and to have a better user experience, I am using the libraries react-navigation and react-navigation-fluid-transitions.

My application has a Splashscreen that has a series of animations and after finishing the user is directed to the Loginscreen or the Workspacescreen.

The screen of Splashscreen takes the time of the animations to check if there is any user in the persistence, if any sends to the Workspacescreen otherwise send to the Loginscreen.

My component that manages the transitions of the routes is like this:

Fluidnavigator (./navigation/FluidNavigator/index.js)

import React from 'react'
import { FluidNavigator } from 'react-navigation-fluid-transitions'

import SplashScreen from '../../screens/SplashScreen'
import LoginScreen from '../../screens/LoginScreen'
import WorkspaceScreenfrom '../../screens/WorkspaceScreen'
// ... outras screen's aqui

export default Navigator = FluidNavigator({
  SplashScreen: { screen: SplashScreen },
  LoginScreen: { screen: LoginScreen, },
  WorkspaceScreen: { screen: WorkspaceScreen},
  // ... outras rotas aqui
});

My problem is that if the user is on Loginscreen or in the Workspacescreen and press the back button the same is coming back to Splashscreen.

What I need to do to inhibit the user from returning to the Splashscreen in such situations?

Answer 1

After 4 hours of searching and then posting this question, I found this video that solves my problem:

• React-Native tutorial # 36 disable back button in navigation

The solution is inside my screens that will not have a return to the previous screen, I disable the button. So screen’s would look like this:

import React from 'react'
import { View, Text, BackHandler } from 'react-native'

class LoginScreen extends React.Component {

  componentWillMount = () => {
    BackHandler.addEventListener('hardwareBackPress', () => true);
  }

  render() {
    return (
      <View>
        <Text>LoginScreen</Text>
      </View>
    )
  }
}

export default LoginScreen