How to pass props to React stack navigator - react-native

Question

I am doing navigation in the following manner Home.js -> discover-things.js(which includes a top nav-bar) -> Filter-screen.js
In Home.js,I have a stack navigator defined like this---
import { StackNavigator } from 'react-navigation';
import DiscoverScreen from './discover-things';
import TopNavBar from './discover-things/top-nav-bar';
export default StackNavigator({
DiscoverScreen: {
screen: DiscoverScreen,
navigationOptions: { header: TopNavBar },
},
});
In the top-nav-bar, I have this---
import React from 'react';
import {Alert} from 'react-native';
export default ({...props}) => ( //Here the props are undefined
<View style={styles.navbarContainer}>
<View style={[styles.titleContainer, globalStyles.verticallyBottom]}>
<Text style={styles.discoverTitle}>
Discover
</Text>
</View>
<View style={[styles.toolsContainer, globalStyles.verticallyBottom]}>
<View style={[styles.toolsInnerContainer, globalStyles.verticallyBottom]}>
<Icon name="search" size={25} style={styles.icon} />
<Icon name="sliders" size={25} style={styles.icon} onPress={() => {props.navigation.navigate('FilterScreen')}
/>
</View>
</View>
</View>
);
Here I am applying an OnClick on one of the icons, so that It can lead me to the filter screen.
In Filter Screen, I have this----
import { StackNavigator } from 'react-navigation';
import FilterScreen from './view';
export default StackNavigator({
FilterScreen: {
screen:FilterScreen,
navigationOptions: {header : null}
}
})
But on click of the icon in the filter screen, nothing happens. What am I doing wrong here and how to correctly implement it?