How to inhibit the "back" button in a React Native application using react-navigation-fluid-transitions

Navigation
0

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

My application has a custom SplashScreen that has a series of animations and, after finishing the user, is directed to LoginScreen or WorkspaceScreen .

  

The SplashScreen screen takes advantage of the animations' time to check if there are any users in persistence, if there is a move to the WorkspaceScreen otherwise it will call LoginScreen .

My component that manages the route transitions looks 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 you're on the LoginScreen or the WorkspaceScreen and press the back button it's back to SplashScreen .

What do I need to do to prevent the user from returning to the SplashScreen screen in these situations?

    
asked by anonymous 04.10.2018 / 17:59

1 answer

0

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

The solution is inside my screen's that are not having a return to the previous screen, I disable the button. So the 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
    
04.10.2018 / 18:15
insert only one field with pdo Save time user watched video and keep watching