React Native StackNavigator in navigationOptions override on press param

Question

I want to make global(same) header for all screens, but can not figure out how to make onPress={ () => state.params.onPressFilterView() } to work. When I move navigationOptions to component as static it works, but when in StackNavigator and its options not working. So some one know how to make it to work? Or maybe how i can write onPress event function which I can override in Component?

Simple StackNavigator:

const HomeNavigator = StackNavigator({
    HomePage: {
        screen: HomeNavigationDrawer,
    },
}, {
    navigationOptions: ({ navigation }) => {
    const {state} = navigation;

    let headerRight = <FeatherIcon.Button name='filter'
         backgroundColor="#444444"
         color="#a2a2a2"
         size={ 30 }
         onPress={ () => state.params.onPressFilterView() }
    >
    </FeatherIcon.Button>;

    return { headerRight  };
    },
});

And added to component:

...
componentDidMount() {
    this.props.navigation.setParams({
        onPressFilterView: this.onPressFilterView.bind(this),
    });
}

onPressFilterView() {}

...

But throws error state.params.onPressFilterView - undefined is not an object

Answer 1

You need to pass navigationOptions within the HomePage object.

const HomeNavigator = StackNavigator({
    HomePage: {
        screen: HomeNavigationDrawer,
        navigationOptions: ({ navigation }) => {
            const {state} = navigation;

            let headerRight = <FeatherIcon.Button name='filter'
                                                  backgroundColor="#444444"
                                                  color="#a2a2a2"
                                                  size={ 30 }
                                                  onPress={ () => state.params.onPressFilterView() }
            >
            </FeatherIcon.Button>;

            return { headerRight  };
        }
    }
});