Now that we know how to customize the look and feel of our headers, let's make them smart! In fact, it might be ambitious, let's just give them the ability to react very clearly to our touch.
The most common way to interact with a heading is to click the button to the left or right of the heading. Let's add a button to the right side of the header (one of the hardest places to tap on the entire screen, depending on your finger and phone size, but also a normal place to place buttons).
When we define our button in this way, the
this variable in the
options parameters is not an instance of
HomeScreen, so you cannot call
setState or any instance methods on it. This is very important because very often you want the buttons in your header to interact with the screen that the header belongs to. So, we'll see how to do this next.
To be able to interact with the screen component, we need to use
navigation.setOptions to define our button instead of the
options property. By using
navigation.setOptions inside a screen component, we can access screen properties, state, context, etc.
Thanks goes to these wonderful people (emoji key):