React Navigation - How To Calling Function From Another File And Use It On HeaderRight OnPress?

I wonder there's a way to using headerRight onPress to doing something like calling Alert: I have a function inside MyPet.js with the code : _alert=()=>{ alert('saving') } an

Solution 1:

Since your Navigation component has no reference to what is in your Pet.js component, you may try the following way

Use navigationOptions in your Pet.js component as

// Inside the class
// Since navigationOptions have no access to this parameter of the class, therefore you need to pass them as params
static navigationOptions = ({navigation}) => {
        const {params}} = navigation.state;
        return {
            headerRight: <FontAwesome name='search' size={20} color="#FFF" onPress={() => params.showAlert()}/> />

        };
    };


 componentDidMount() {
        this.props.navigation.setParams({
            showAlert: this.alertShower
        });
    }

alertShower = () =>  Alert.alert('Success', 'Hello')