Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove screen from stack navigator

I’ve observed Back button logic works seeing the sequence of screens in the stack. I’ve a Drawer navigator placed inside stack navigator.

On top of the stack I’ve Splash screen. On Dashboard when I press back button it takes me to splash screen.

How can I remove splash screen from stack after entering in the app, So when I press back button Dashboard it will EXIT the app instead of taking to SPLASH SCREEN.

/* @flow */

import React from "react";
import { Platform, Text } from "react-native";
import { Root } from "native-base";
import { StackNavigator, DrawerNavigator} from "react-navigation";
import Register from "./components/Register";
import Available from "./components/Available";
import Splash from "./components/splash/“;
import SideBar from "./components/sidebar";
import Discover from "./components/Discover/";
import Dashboard from "./components/Dashboard/";
import Contact from "./components/Contact"



const Drawer = DrawerNavigator(
  {
    Dashboard: { screen: Dashboard },
    Discover: { screen: Discover },
    Contact: { screen: Contact},
      },
  {
    navigationOptions: {
      gesturesEnabled: false,
    },
   initialRouteName: "Dashboard",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    drawerPosition: 'right',
    contentComponent: props => <SideBar {...props} />
  }
);


const AppNavigator = StackNavigator(
    {
      Splash: { screen: Splash },
      Drawer: { screen: Drawer },                           
      Available: { screen: Available },
        Register: { screen: Register },
    },
    {
       //  initialRouteName: “Splash”,
         headerMode: "none",
    }
);

export default () =>
    <Root>
        <AppNavigator />
    </Root>;
like image 975
devedv Avatar asked Dec 29 '17 11:12

devedv


People also ask

How do I turn off swipe back on Iphone in React Native?

To make this work, you need to: Disable the swipe gesture for the screen ( gestureEnabled: false ). Override the native back button in the header with a custom back button ( headerLeft: (props) => <CustomBackButton {... props} /> ).

What does the stack navigator look&feel like?

By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, use OS default animation on Android. But the animations can be customized to match your needs.

How do I use the @react-navigation/stack navigator?

To use this navigator, ensure that you have @react-navigation/native and its dependencies (follow this guide), then install @react-navigation/stack: You also need to install react-native-gesture-handler.

How to manage inactive screens in React Native navigator?

Default options to use for the screens in the navigator. Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. Make sure to call enableScreens from react-native-screens to make it work. Defaults to true. You can customize it further on per screen basis using the detachPreviousScreen option.

How to customize transition animations for all screens in the navigator?

If you want to customize the transition animations for all of the screens in the navigator, you can specify it in screenOptions prop for the navigator. Example configuration for iOS modal presentation style:


1 Answers

One solution would be to reset the stack inside the splash screen component and redirect the user to the screen that you prefer:

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Drawer'})
  ]
})
this.props.navigation.dispatch(resetAction)

For newer versions of react-navigation :

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

Link to the official documentation

like image 75
Sarantis Tofas Avatar answered Sep 21 '22 06:09

Sarantis Tofas