CODEWITHSUNDEEP
react-nativereact-navigation
GeraltDieSocke
GeraltDieSocke

Reputation: 1618

How can I pass a function to a header button in react navigation's navigationOptions?

What I want to do:

I have a screen with an add button on the header. When I click it a modal opens and it should pass in a function into this opened modal.

But I can't make it work because I don't use classes.

This is how I do it:

PlayerScreen.navigationOptions = ({ navigation, screenProps }) => {
  console.log("screen props", screenProps);
  return {
    title: "Spieler",
    headerRight: (
      <Button
        onPress={() => navigation.navigate("AddPlayerModal", {addPlayer})}
        title="+"
        color="black"
      />
    )
  };
};

The problem is addPlayer is a function from the PlayerScreen Component. So I have no way to access it like this. Is there a way to pass the function in somehow? I think I could use a class and then I should have access in the static navigationOptions method right?

But I want to make it work without creating a class. So is there a way?

What have I tried:

I tried to set the param like this on the PlayerScreen component:

useEffect(() => {
    navigation.setParams({ addPlayer });
  }, []);

But in the modal when I do this:

const addPlayer = navigation.getParam("addPlayer");

addPlayer is undefined.

Thank you in advance, Geralt

Upvotes: 1

Views: 767

Answers (1)

Konstantin Paulus
Konstantin Paulus

Reputation: 2195

Have you tried this: 

PlayerScreen.navigationOptions = ({ navigation, screenProps }) => {
  const { params = {} } = navigation.state
  return {
    title: "Spieler",
    headerRight: (
      <Button
        onPress={() => navigation.navigate("AddPlayerModal", { addPlayer: params.addPlayer })}
        title="+"
        color="black"
      />
    )
  };
};

useEffect(() => {
  navigation.setParams({ addPlayer });
}, []);

Upvotes: 1

Related Questions