navigation.navigate does not work in react native

Question

I am creating filter page screen.. On this screen once i fill all the data on which i wanted to filter the data i will click on save button and that will redirect me to the home page where my new filtered data will be displayed.My home page already showing the general data but if i wanted to see filter data then i will filter that data from filter screen.
But here i have problem is i am not able to redirect to the home page. the code which i am using for redirection is same for whole my application which is working perfectly alright.I only have problem with redirecting to home page and there no error displayed in the console but is prints the message i have written in my function. Rather than nothing is doing.

import NavigationService from '../../components/NavigationService';
    onSaveClicked() {

        console.log('Filter is in progress');
        const { navigation } = this.props;
        navigation.navigate('home');
        const { userprofile } = this.props;
        const  { type } = userprofile;
        NavigationService.navigate('HomeStackScreen1', {type:type});


      }
  renderButton() {
    return (
      <Button
        style={{ alignItems: 'center' }}
        onPress={this.onSaveClicked.bind(this)}
      >
        Filter
      </Button>
    );
  }

navigationService.js

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

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

function getParams(param){
  console.log("param: "+param);
  _navigator.dispatch(
    console.log("param: "+param),
    navigation.getParam(param)
  );
}


export default { setTopLevelNavigator, navigate, getParams };

Navigation stack :

    const HomeStack = createStackNavigator(
  {
    HomeStackScreen1: {
      screen: DrawerNavigation,
      navigationOptions: ({ navigation }) => ({
        title: 'Action',
        headerLeft: (
          <DrawerButton name="navicon" style={styles.Headercss} navigation={navigation} />
        ),
        headerRight: (
          <SearchButton style={styles.Headercss} navigation={navigation} />
        ),
        //headerStyle: { paddingRight: 5, paddingLeft: 5 },
        headerTitleStyle: { color: 'rgb(234, 94, 32)' }

      })
    },
    Project: {
      screen: ProjectTab,
      navigationOptions: () => ({
        title: '  Create New Project',
        headerTintColor: 'rgb(234, 94, 32)', 
      })
    },
    Notification: {
      screen: NotificationScreen
    },
    Filters: {
     screen: FilterScreen,
     navigationOptions: () => ({
      title: 'Filter',
      headerTintColor: 'rgb(234, 94, 32)', 
    })
    },
    UpdateProfile: {
      screen:UserProfileScreen,
      navigationOptions: () => ({
        title: 'Profile',
        headerTintColor: 'rgb(234, 94, 32)', 
      })
    },
    ViewActorProfile: {
      screen: ViewActorProfileScreen,
      navigationOptions: () => ({
        title: 'View Profile',
        headerTintColor: 'rgb(234, 94, 32)', 
      })
    },
    ViewProducer :{
      screen: ViewProducerProfile,
      navigationOptions: () => ({
        title: 'View Profile',
        headerTintColor: 'rgb(234, 94, 32)', 
      })
    },
    ProjectView: {
      screen: ViewProject,
      navigationOptions: () => ({
        title: 'View Project',
        headerTintColor: 'rgb(234, 94, 32)', 
      })
    },
    AppliedProjectScreen: {
      screen: AppliedProjectUsers,
      navigationOptions: () => ({
        title: 'Applied Users',
        headerTintColor: 'rgb(234, 94, 32)', 
      })
    },
    ChattingScreen: {
      screen: Chat,
      navigationOptions: {
        title: 'Chat'
      }
    },
    ViewActorProfileScreen: {
      screen: ViewActorProfileScreen,
      navigationOptions: () => ({
        title: 'View Profile',
        headerTintColor: 'rgb(234, 94, 32)',
      })
    }
  },
  {
    initialRouteName: 'HomeStackScreen1',
    headerMode: 'screen'
  }
);

Answer 1

You have to use the exact home route name as navigate param:

navigation.navigate('HomeStackScreen1');

If you want, you also can rename HomeStackScreen1 to Home on your Navigation Stack.

https://reactnavigation.org/docs/en/navigating.html