Trying to figure out how params are passed in react-navigation
. Once a user selected an option from the Filter using the left header button, loadItems(filter)
should be called with that filter as a parameter. How do I catch such event?
export default class FavoritesView extends Component {
static navigationOptions = ({navigation}) => ({
headerLeft: (
<Button
onPress={()=>{FavoritesView.showFilteringMenu(navigation)}}
title="Filter"
/>
),
});
static showFilteringMenu(navigation) {
let FILTERS = [
'A',
'B',
'C'
];
ActionSheet.showActionSheetWithOptions({
title: "Filter options",
options: FILTERS
},
(buttonIndex) => {
navigation.setParams({
selectedOption: FILTERS[buttonIndex]
}); // A parameter is set here
});
}
loadItems(filter) { // This function should be called
StorageService.getItems(filter).then(v => this.setState({ data: v }));
}
render() {
let {navigation} = this.props;
return (
<SafeAreaView style={styles.container}>
<NavigationEvents
onWillFocus={payload => this.loadItems()} // This works only for initial load
/>
</SafeAreaView>
);
}
}