Search code examples
androidreact-nativewix-react-native-navigation

How to finish SplashScreen from stack in react-native-navigation


I am new in react-native an I am working on a react-native project, I use react-native-navigation from wix and didn't find any solution for how to clear the SplashScreen or any Screen from stack which I don't need to go back again.

I use this to navigate after 2 second.

componentWillMount(){
    setTimeout(
        () => {
            this.props.navigator.push({
                screen: 'SampleApp.LoginScreen',
            })
        }, 2000
    );
}

and this in my index.js

export function registerScreens() {
    Navigation.registerComponent('SampleApp.SplashScreen', () => SplashScreen);
    Navigation.registerComponent('SampleApp.LoginScreen', () => LoginScreen);
}

Please help me to find the solution where I need to call finish() or is there something else. Thanks in advance


Solution

  • You can try this,

    import {BackHandler} from 'react-native';
    
    constructor(props) {
        super(props)
        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
    }
    
    
    
    onNavigatorEvent(event) {
        switch (event.id) {
            case 'willAppear':
                this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
                this.backHandler.remove();
                break;
            case 'willDisappear':
                this.backPressed = 0;
                break;
            default:
                break;
        }
    }
    
    handleBackPress = () => {
        if (this.backPressed && this.backPressed > 0) {
            this.props.navigator.popToRoot({ animated: false });
            return false;
        }
    
        this.backPressed = 1;
        this.props.navigator.showSnackbar({
            text: 'Press one more time to exit',
            duration: 'long',
        });
        return true;
    }