navigation.navigate does not change scene - node.js

Question

I've been trying to work with this since yesterday, tried different methods and none actually worked. I'm currently using a drawer navigator, tab navigator and I want to open a different scene when clicking a icon.
Here is the current design:
The icon I want to open a new scene is the "filter" up on the top-right corner.
My current header code is:
<Header>
<Left>
<Icon name='ios-menu' style={{ color: 'white' }} onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())} />
</Left>
<View style={{ width: Dimensions.get('window').width * 0.7 }}>
<Text style={styles.headerTextTop}>Estabelecimentos</Text>
</View>
<Right>
<Icon name='ios-search' style={{ paddingRight: 20, color: 'white' }} />
<Icon name='ios-options' style={{ color: 'white' }} onPress={this.openFilter} />
</Right>
</Header>
and here is the function openFilter:
openFilter = () =>
{
this.props.navigation.navigate('Filter');
}
I'm importing the filter component from its .js file, I can't get it to switch scenes.
Here is the Filter.js (which i'm importing as import Filter from './Filter'):
import React, { Component } from "react";
import {
View,
Text,
Dimensions
} from "react-native";
import { Icon, Header, Left, Right } from 'native-base'
class Filter extends Component {
render() {
return (
<View>
<Header>
<Left>
<Icon name='ios-arrow-back' style={{color: 'white'}} onPress={() =>
this.props.navigation.goBack()} />
</Left>
<View style={{ width: Dimensions.get('window').width * 0.7 }}>
<Text style={sty.headerTextTop}>Filtro</Text>
</View>
<Right>
</Right>
</Header>
</View>
);
}
}
export default Filter;
--EDIT:--
As #Pritish Vaidya suggested, I should implement a Stack Navigator, so I made one:
import { StackNavigator} from 'react-navigation'
import Filter from './Filter';
import App from './App';
import Home from './Home';
const stackNav = StackNavigator({
App: {
screen: App,
navigationOptions:({navigation}) => ({
title: "Main",
headerStyle: { paddingRight: 10, paddingLeft: 10 }
})
},
Filter: {
screen: Filter,
navigationOptions: (props) => ({
title: "Filtro",
})
},
Home: {
screen: Home,
navigationOptions: (props) => ({
title: "Home",
})
}
})
export default stackNav;
But in Home.js when I call navigate using:
<Icon name='ios-options' style={{ color: 'white' }} onPress={() => this.props.navigator.navigate("Filter")} />
It gets me this error: