Pass function into React Navigation's headerTitle component

Question

I'm trying to implement a deletePost button, but I'm struggling to pass it into my header component. Here's the

export class PostScreen extends Component {


  // Custom headerTitle component.
  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return { headerTitle: <PostTitle {...params} handleDelete={this.handleDelete}/> }
  };

  handleDelete = async (id) => {
    const { deletePost } = this.props;
    const token = await AsyncStorage.getItem('token');
    deletePost(token, id);
  }

render() {

This does'nt seem to be the right way to pass it in. What's the correct way? I can't find anything in the docs.

Are you sure this is react-native-navigation and not react-navigation? — Andrew
– Andrew, Commented Mar 5, 2019 at 17:50

Andrew · Accepted Answer · 2019-03-05 18:05:26Z

9

As you are using react-navigation then this is how you set a function in the header component.

You have to define the function in your class
In your componentDidMount set the function as a param using setParam
Use getParam in your navigation header.

This is how it would look in a very simple component.

export default class Screen1 extends React.Component {

  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state; // this is included because you had added it and you may require the params in your component
    return {
      headerTitle: <PostTitle  {...params} handleDelete={navigation.getParam('handleDelete')} />, // grab the function using getParam
    };
  };

  handleDelete = () => {
    alert('delete')
  }

  // set the function as a param in your componentDidMount
  componentDidMount() {
    this.props.navigation.setParams({ handleDelete: this.handleDelete });
  }


  render() {
    return (
      <View style={styles.container}>
        <Text>Screen1</Text>
      </View>
    )
  }
}

Then in your PostTitle component you can use the function that you just passed by calling this.props.handleDelete

Here is a snack that shows the basic functionality https://snack.expo.io/@andypandy/functions-in-a-navigation-header

You can read more about setting functions in the navigation header here

edited Mar 5, 2019 at 18:05

answered Mar 5, 2019 at 17:59

Andrew

28.7k9 gold badges95 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

peter Over a year ago

Thanks, it works. I still get a Failed prop type when the component first mounts. Is there anyway I can set the prop before the it mounts?

Andrew Over a year ago

Which prop is failing?

peter Over a year ago

the handleDelete function. When the component first mounts it's not available, then componentDidMount makes it available

Andrew Over a year ago

I am guessing it is in the PostTitle component where it is complaining you could set a default value for the prop

Andrew Over a year ago

One of those two are your pretty much your options.

|

Cho Cho · Accepted Answer · 2019-07-24 18:24:13Z

0

in your component did mount use an arrow function as below and the function won't be called when the component first mount.

componentDidMount() {
    this.props.navigation.setParams({ handleDelete: (() => this.handleDelete()) 
});

answered Jul 24, 2019 at 18:24

Cho Cho

1571 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Pass function into React Navigation's headerTitle component

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related