1

I am trying to create a dynamic splash screen in the app, for that I have created a component screen called Splashscreen and after a certain interval I am routing the user to the normal stack. The problem is when the user is navigating back I do not want the user to reach the splash screen before being able to exit the app.

This is my code so far

const NewsStack = StackNavigator({
    . . . 
});

export const Root = StackNavigator({
    Splashscreen: {
        screen: Splashscreen
    },
    Mainscreen: {
        screen: NewsStack
    }
}, {
    mode: 'modal',
    headerMode: 'none'
});

The NewsStack is what contains the rest of the app. As of now the app works fine by opening the splashscreen and then navigating a different screen after a certain timeout but while navigating out of the app the user reaches the splashscreen. Is there any way other than listening for back button press? Does the back button method work in iOS as well?

Jude Fernandes
  • 7,437
  • 11
  • 53
  • 90

2 Answers2

3

Use switchnavigator as documented in https://reactnavigation.org/docs/auth-flow.html

— from the docs

The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away

—

By default it handles the back button

suman j
  • 6,710
  • 11
  • 58
  • 109
2

As others mentioned SwitchNavigator is a good option. But you can get it done simply by conditional rendering instead of pushing Splash Screen to navigation stack. Since lots of answers are available on this I am simply pasting a link to a similar one so as to avoid duplication. Here is the link

Rahul Bansal
  • 306
  • 3
  • 9