How to force stackNavigator to target MainScreen?

Question

I have implemented a StackNavigator and a DrawerNavigator, in my DrawerNavigator in the first option I am calling StackNavigator. The problem is that when I'm browsing Stack screens I wanted to go back to the main screen through Drawer but this doesn't happen because Stack stores the last screen the user was on.

I have tried using some Navigation Prop but I am not sure where to insert this code or even which of the commands to use on the stack.

MenuDrawer.js

import React from 'react';
import {
    View,
    ScrollView,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    Dimensions
} from 'react-native';

export default class MenuDrawer extends React.Component{
    navLink(nav, text) {
        return(
            <TouchableOpacity style={{height: 50}} onPress={() => this.props.navigation.navigate(nav)}>
                <Text style={styles.link}>{text}</Text>
            </TouchableOpacity>
        )
    }

    render() {
        return(
            <ScrollView styles={styles.continer}>
                <View style={styles.topImage}>
                    <Image style={styles.image} source={require('../images/informationappscreen/act.png')} />
                </View>

                <View style={styles.bottomLinks}>
                    {this.navLink('Principal', 'Principal')}
                    {this.navLink('Sobre o Aplicativo', 'Sobre o Aplicativo')}
                    {this.navLink('Sobre os Responsáveis', 'Sobre os Responsáveis')}
                    {this.navLink('Sobre o Projeto', 'Sobre o Projeto')}
                    {this.navLink('Política e Termos', 'Política e Termos')}
                </View>

                <View style={styles.footer}>
                    <Text style={styles.description}>ACT</Text>
                    <Text style={styles.version}>v1.3.0</Text>
                </View>
            </ScrollView>
        );
    }
}

App.js

import React from 'react';
import { View, Dimensions } from 'react-native';
import { Button, Icon } from 'native-base';
import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';
...

const HomeNavigator = createStackNavigator ({
  'Main1': {
    screen: Main1,
    navigationOptions: {
      title: 'Menu Principal',
      headerRight: (<View></View>)
    }
  },
  'Main2': {
    screen: Main2,
    navigationOptions: {
      title: 'Menu Principal',
      headerRight: (<View></View>)
    },
  },
  'SecondMain': {
    screen: SecondMain,
    navigationOptions: {
      title: 'Menu Querer'
    }
  },
  'Action1': {
    screen: Action1,
    navigationOptions: {
      title: 'Ações'
    }
  },
...
}, {
  defaultNavigationOptions: ({ navigation }) => {
    return {
      headerTitleStyle: {
        fontWeight: 'bold'
      },
      headerLeft: (
        <Button transparent onPress={() => navigation.toggleDrawer()}>
          <Icon name='menu' style={{color: '#FFF'}} />
        </Button>
      ),
      headerRight: (
        <HomeIcon navigation={navigation} />
      ),
      headerStyle: {
        backgroundColor: '#b80003'
      },
      headerTintColor: '#FFF'
    }
  }
});

const DrawerConfig = {
  drawerWidth: Dimensions.get('window').width * 0.75,
  contentComponent: ({ navigation }) => {
    return(<MenuDrawer navigation={navigation} />)
  }
}

const DrawerNavigator = createDrawerNavigator (
  {
    'Principal': {
      screen: HomeNavigator
    },
    'Sobre o Aplicativo': {
      screen: InformationApp
    },
    'Sobre os Responsáveis': {
      screen: Team
    },
    'Sobre o Projeto': {
      screen: Project
    },
    'Política e Termos': {
      screen: Policy
    }
  },
  DrawerConfig
);

const AppDrawerContainer = createAppContainer(DrawerNavigator);

export default AppDrawerContainer;

Can you share the code of "MenuDrawer" component which you used for drawer — Mehran Khan, Sep 02 '19 at 03:10

Mehran Khan · Accepted Answer · 2019-09-03T03:00:22.857

0

Can you try reset , change method navLink

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

navLink(nav, text) {
  return (
    <TouchableOpacity
      style={{ height: 50 }}
      onPress={() => {
        const resetAction = StackActions.reset({
          index: 0,
          actions: [NavigationActions.navigate({ routeName: nav })]
        });
        this.props.navigation.dispatch(resetAction);
      }}
    >
      <Text style={styles.link}>{text}</Text>
    </TouchableOpacity>
  );
}

edited Sep 03 '19 at 03:00

answered Sep 02 '19 at 04:23

Mehran Khan

3,616
1
13
10

When implementing the code mentioned and selected any MenuDrawer option is received the following error message: Uncaught Error: h.NavigationActions.reset is not a function. (In 'h.NavigationActions.reset({index:0,actions:[h.NavigationActions.navigate({routeName:t})]})','h.NavigationActions.reset' is undefined) touchableHandlePress@[native code] – Alex Xavier Sep 03 '19 at 00:05
@Alex Xavier , Answer updated with link can you try StackActions.reset – Mehran Khan Sep 03 '19 at 03:00
The solution in question worked but in compensation I had to copy the screens that were only in `DrawerNavigator` also to `StackNavigator`. Which is not a bad option since I will be able to configure all screens in just one `Navigator`. – Alex Xavier Sep 05 '19 at 23:48

score 0 · Answer 2 · answered Sep 02 '19 at 06:37

0

Try using this.props.navigation.push('your_pagename') this will push new item to the stack. It means when using push componentDidMount() method call again

answered Sep 02 '19 at 06:37

sd_dewasurendra

383
6
22

I've thought about using push, the question is where in the code to use it properly? – Alex Xavier Sep 03 '19 at 00:12
Does navLink() trigger when you press the button?? – sd_dewasurendra Sep 04 '19 at 08:35

How to force stackNavigator to target MainScreen?

2 Answers2