score:-1
First of all your main issue is you cann't create more than one StackNavigator() on your code.
Please try different navigator for redirection like below example code.
import {DrawerNavigator,StackNavigator,createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation';
// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';
// tab navigator screens
import * as TAB from '../tab';
export const stack = StackNavigator({
DetailScreen:{screen:DetailScreen},
MainScreen:{screen:MainScreen}
},{
initialRouteName:'DetailScreen'
});
const secondStack = createMaterialTopTabNavigator({
RegisterScreen:{screen:RegisterScreen},
ForgotScreen:{screen:ForgotScreen}
},{
initialRouteName:'ForgotScreen'
})
export const Tabs = createBottomTabNavigator({
Login:{screen:TAB.Login},
TabOne:{screen:secondStack},
TabTwo:{screen:TAB.TabB}
},{
animationEnabled:true,
initialRouteName:'Login'
})
export const Drawer = DrawerNavigator({
Tabs:{screen:Tabs},
Stack:{screen:stack}
},
{
animationEnabled:true,
initialRouteName:'Tabs'
})
hope above code snippet is useful for you.
score:0
There is an issue with the sub actions being reset inside the Stack which can be seen here
Therefore the workaround for this issue would be to wrap your createBottomTabNavigator
inside a createStackNavigator
with headerMode: none
in order to achieve the desired effect.
Info
By adding a StackNavigator nested directly within a DrawerNavigator, the sub actions will be reset only to the StackNavigator defined and won't affect the child screen states, therefore it won't throw the error, as mentioned in the code
if (route.index !== undefined && route.index !== 0) {
subAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: route.routes[0].routeName,
}),
],
});
}
MergedNavigator.js
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';
// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';
//plain
export const stack = StackNavigator({
DetailScreen:{screen:DetailScreen},
MainScreen:{screen:MainScreen}
},{
initialRouteName:'DetailScreen'
});
const secondStack = StackNavigator({
RegisterScreen:{screen:RegisterScreen},
ForgotScreen:{screen:ForgotScreen}
},{
initialRouteName:'ForgotScreen'
})
export const Tabs = createBottomTabNavigator({
Login:{screen:LoginScreen},
TabOne:{screen:secondStack},
TabTwo:{screen:TabTwo}
},{
animationEnabled:true
})
const TabStack = createStackNavigator({ //... Adding the Stack here
Tabs: {screen: Tabs}
}, {
headerMode: 'none'
})
export const Drawer = DrawerNavigator({
Tabs:{screen:Tab},
Stack:{screen:stack}
})
Here's a modified Snack with header's enabled
score:0
import { StackActions, NavigationActions } from 'react-navigation';
let { navigation } = this.props;
let resetAction = StackActions.reset({
key: undefined,
index: 0,
actions: [NavigationActions.navigate({ routeName: 'YourScreen' })],
});
navigation.dispatch(resetAction);
When you set the key to undefined, the navigator uses the actual stack, not the root.
Source: stackoverflow.com
Related Query
- React Native - There is no route defined for Login
- React Native, there is no route defined for index undefined
- Will there be react native for windows phone?
- How to center text in Facebook Login Button for React Native (Android)?
- Is there an replacement Parameter for onChange in react Route v4
- How to add sourcemap in React Native for Production?
- React Native: No propType for native prop RCTView.maxHeight
- How to adjust font size to fit view in React Native for Android?
- Is there an official style guide or naming convention for React based projects?
- Is there a React shorthand for passing props?
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- React native for android run very slow when not enable "Debug JS"
- Building hybrid React apps for iOS and Android with native performance
- React Native - __DEV__ is not defined
- React Native - How to open route from push notification
- Info.plist file for react native ios app using expo SDK
- Is there an equivalent for ng-show and ng-hide in react js?
- Is there a way to get React to autodefine "keys" for children?
- is there any good Http library for React flux architecture
- Typescript path mapping for React Native *.android.ts and *.ios.ts modules
- Text is getting cut off in android for react native
- TypeScript issues when creating ref for React Native TextInput
- React Route Component handle all "/" routes EXCEPT for "/login"
- React Native - Why we use the tintColor property for Image component?
- Flow type for specific React Native events?
- Is there a way to apply a fade in/out transition with React suspense for the fallback component?
- How to set up analytics on React Native for iOS
- How would I test for a react router route param in react-testing-library?
- Disable Debugging in Expo For React Native App
- How to enable the Android monitor in React Native for checking logs?
More Query from same tag
- Mapbox GL JS Controls Go Off the Map when Resizing a styled-components Container in React
- redux-form, change fields value without changing dirty state
- Using two components in a classed based component in ReactJS
- Styling react-rendered HTML by classes
- Spring webflux data in ReactJs UI
- Filtering a fetched list from an API using React Query
- How to insert a new row in react-tabulator
- Disable customHook when component is unmounted
- Context's Provider default value function gets invoked, not the function inside the Provider
- React/material ui raisedbutton executing onTouchTap on init
- Toggle click on a mapped data React JS
- Re-Render only a particular child
- How to pass value of state in a function in react using hooks
- React - online not rendering
- Can't get data via filter () in mongodb
- axios.post is sending a GET request
- use same function for different buttons
- sass does not work in my react js project
- React Router Url Giving Bad Request
- pop up does not open when using select and option in react.js
- Using React hooks in an external API service layer
- How to add key:value in object iteratively
- Ag-grid render multiple rows in a cell
- TypeError: Cannot call a class as a function after deploying to Netlify?
- React js attach click event on every single span element
- Direct fetch or fetch,store,render in redux
- Redux-Thunk : Actions must be plain objects
- Does React.js require server side?
- How to use React Component with Tether.js/drop.js
- Dynamic Routing in react does not render, trows weird error in console