Stacknavigator containing tabbed navigator ignores one of the routes - reactjs

I have a StackNavigator that contains a Tabbed Navigator(with two tabs) and a single route CreateReviewsScreen, that is not within the Tabbed Navigator. When I try to navigate back from CreateReviewsScreen to the tabbed navigator I'm unable to do so. I believe this is because the single route CreateReviewsScreen is being ignored on construction.
In my app container's navigationRef there is only the tabbed navigator, "Tabs". "CreateReviewScreen" is missing. The length in the photo below should be 2 not 1.
Relevant sections of code:
TabNav.js
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { ReviewsScreen, VenuesScreen, CreateReviewsScreen } from '../scenes';
import { APP_COLORS } from '../styles/Global';
const mainTabs = createBottomTabNavigator(
{
Reviews: ReviewsScreen,
Venues: VenuesScreen
},
{
initialRouteName: 'Reviews',
backBehavior: 'Reviews',
tabBarOptions: {
activeTintColor: APP_COLORS.FORE,
labelStyle: {
fontSize: 18,
textAlign: 'center'
},
style: {
backgroundColor: APP_COLORS.PRI_LGHT,
},
}
}
);
export default createStackNavigator({
Tabs: mainTabs,
CreateReviews: CreateReviewsScreen
});
Navigation.js
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import { createAppContainer } from '#react-navigation/native';
import { LoggedOutScreen, LoginScreen, RegisterScreen, UserProfileScreen } from './scenes/index';
import TabNav from './Drawer/TabNav';
const AuthStack = createStackNavigator({
LoggedOut: {
screen: LoggedOutScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
title: 'Login'
}
},
Register: {
screen: RegisterScreen,
navigationOptions: {
title: 'Sign up!'
}
},
UserProfile: {
screen: UserProfileScreen,
navigationOptions: {
title: 'Your Profile'
}
}
});
export default createAppContainer(createSwitchNavigator(
{
Main: TabNav,
Auth: AuthStack
},
{
initialRouteName: 'Auth',
}
));

Try this.props.navigation.goBack(null)

It turns out I wasn't observing the correct error. The back behavior to the previous stack item was happening but there was a 10 second delay caused by remote debugging in Expo. I just didn't wait long enough before restarting the app to see that this was the issue. Disabling remote debugging made the back button work instantaneously.

Related

react-native-navigation combining createStackNavigator, BottomTabNavigator and Modal

I currently have a navigation structure that looks like this:
Newsfeed (in RootBottomTabNavigator)
NewsfeedItem
CommentModal
Search (in RootBottomTabNavigator)
const NewsfeedStack = createStackNavigator(
{
Newsfeed: {
screen: NewsfeedScreen,
},
NewsfeedItem: {
screen: NewsfeedItemScreen,
},
}
);
const NewsfeedItemStack = createStackNavigator(
{
Main: {
screen: NewsfeedStack,
},
CommentModal: {
screen: CommentModal,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
const SearchStack = createStackNavigator(
{
Search: { screen: SearchScreen }
}
)
const Tabs = createBottomTabNavigator(
{
Newsfeed: { screen: NewsfeedStack },
Search: { screen: SearchStack },
},
);
Two issues I could not resolve with this set up are:
Hiding the BottomTabs on the NewsfeedItem and CommentModal screens.
Clicking on the tab to return to the initial screen no longer works because the navigation stack thinks that the NewsfeedItem is the initial screen.
Is there a setup to fix these issues?

how to logout from react navigation stacknavigation nested components

i want to logout from a component inside a stacknavigator and the stacknavigator is inside a bottomtabsnavigator which is finally inside a stacknavigator that houses two switchnavigator
i tried this.props.navigation.navigate(component) and it failed and several other ways i am a bit stuck and frustrated any help will be greatly appreciated as i am new to react native and react navigation
const AddContactTab = createStackNavigator({
AddContact: AddContactsActivity,
});
const ManageContactsTab = createStackNavigator({
ManageContacts: ManageContactsActivity,
viewContact: ViewSingleContactsActivity,
editContacts: EditContactsActivity
});
const Tabs = createBottomTabNavigator({
ManageContacts: ManageContactsTab,
AddContact: AddContactTab
}, {
tabBarOptions: {
activeBackgroundColor:'#3F51B5',
activeTintColor:'#ccc',
showLabel:false,
style: {
backgroundColor:'white',
color:'white'
},
tabStyle:{
},
// labelStyle:{
// color:'white',
// fontWeight: 'bolder',
// fontSize: 14
// }
},
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: () => {
const { routeName } = navigation.state;
let tabName;
tabName = routeName === 'AddContact' ? 'plus' : 'home';
return <Icon name={tabName} size={24}
color="grey" />
}
})
},
);
export default createAppContainer(Tabs);
const MainStack = createStackNavigator(
{
Home: { screen: HomeActivity },
Register: {screen: RegistrationActivity}
},
{
initialRouteName: 'Home',
}
);
const AuthStack = createStackNavigator(
{
Dashboard: { screen: DashboardActivity },
},
{
initialRouteName: 'Dashboard',
}
);
const RootStack = createSwitchNavigator({
initialLoading: InitialLoadingActivity,
auth: AuthStack,
all: MainStack,
},
{
initialRouteName: 'initialLoading',
});
now i want to logout from addcontactsactivity to the initialroute of the AuthStack stack navigator....please if i am not clear enough let me know so i can edit my question
Regarding documentation I guess you can try:
this.props.navigation.dispatch(StackActions.popToTop())
The popToTop action takes you back to the first screen in the stack, dismissing all the others.
Documentation
You need to reset your present stack.
Set the present stack index to 0
Got to the parent stack which has access of all the screens
Navigate to that screen.
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
Edit : Use this if it works for you.
this.props.navigation.dispatch(
{
type: 'Navigation/NAVIGATE',
routeName: 'GoToANavigator',
action: {
type: 'Navigation/NAVIGATE',
routeName: 'GoToAScreenInANavigator',
}
}
);
ref
ref 2

React Native: createBottomTabNavigator header: null not working

My App.js looks like this which has StackNavigator
export default class App extends Component {
render() {
return (
<AppStackNavigator />
);
}
}
const AppStackNavigator = new StackNavigator({
LoginScreen: { screen: LoginScreen },
DashboardScreen: { screen: DashboardScreen },
ImportantNumberScreen: { screen: ImportantNumberScreen },
EventListScreen: { screen: EventListScreen },
});
I have to create bottom navigation so i am using react-navigation component createBottomTabNavigator where i want to set header as null
so i tried following code
static navigationOptions = {
header: null,//works with createStackNavigator but not with createBottomTabNavigator
}
Also tried
export default createBottomTabNavigator({
HomeScreen: {screen : HomeScreen,navigationOptions:{header:null}},
GuestCardScreen: GuestCardScreen,
MoreScreen: MoreScreen,
StatementScreen: StatementScreen,
});
but unfortunately these code not working with createBottomTabNavigator
I am using
"react-navigation": "^2.17.0"
Node version v10.11.0
npm version v6.4.1
TabBar
const MainAppTab = createBottomTabNavigator({
[HOME_STACK]: {
screen: Home,
},
[NOTIFACATION]: NotificationContainer,
[STINGER]: StingerContainer,
[MESSAGE]: MessageContainer,
[USER_PROFILE]: ProfileContainer
},
},
{
// settings
});
Main Navigator
const AppNavigator = createStackNavigator({
[WELCOME]: {
screen: WelcomeContainer,
},
// other screens
[MAIN]: {
screen: MainAppTab,
navigationOptions: {
header: null, <----- this will help you
},
},
}, {
initialRouteName: WELCOME,
},
});
you should set tab bar options like below:
const TabNav = createBottomTabNavigator({
HomeScreen: {screen : HomeScreen},
GuestCardScreen: GuestCardScreen,
MoreScreen: MoreScreen,
StatementScreen: StatementScreen,
});
// just for hide tabbar header
const StackNavForTabs = createStackNavigator({
tab: TabNav,
}, {
header: null,
headerMode: 'none'
});
//your main stack navigator
export default AppStack = createStackNavigator({
otherStackRoutes: OtherRoute,
tabStack: StackNavForTabs,
});

transition screen of tabnavigator from stacknavigator

I used TabNavigator in the main.js file
const TabsNav = TabNavigator({
sccreen1: {
screen: screen1
},
screen2: {
screen: screen2
},
},
{
navigationOptions: ({ navigation }) => ({
tabBarVisible: false,
}),
});
I used the following code in the today.js file
class TodayMenu extends Component {
static navigationOptions = {
title: 'today',
headerBackTitle: null,
}
}
export default TodayMenu = StackNavigator(
{
First: {screen: TodayMenu},
Second: {screen: DetailsProduct}
}
)
I'm going to transition the screen today to screen1 or screen2, which code should i use?
if you want to have stackNavigator you should define a button or somthing like that and use
this.props.navigation.navigate('destination screen')
you can find more about it hear

modal mode screen inside StackNavigation

I am trying to make one screen to act as modal inside regular StackNavigation object. Mean, I want all the screens act as cards (render from the side) but one screen to act as modal (render from the bottom) but it just dont work, all the screens render from the side.
CODE:
export const Modal = StackNavigator({
ReportPage: {
screen: ReportContainer
}
}, {
headerMode: 'none',
mode:'modal'
})
export const Main = StackNavigator({
Feed: {
screen: Feed
},
ModalScreen: {
screen: Modal
}
}, {
headerMode: 'none'
})
Use code below:
export const HomeNavigator = StackNavigator({
Feed: {
screen: Feed
},
OtherScreen: {
screen: OtherScreen
}
})
const Main = StackNavigator(
{
Home: { screen: HomeNavigator }
ModalScreen: { screen: ModalScreen }
},
{
mode: 'modal',
headerMode: 'none',
},
);
You need to create a Home StackNavigator containing all screens having Push Navigation and
then create a main StackNavigator which will contain Home Stack and the modal screen you want to display.

Resources