Custom function inside header button react native

react-navigation header right button
react navigation custom header component
react-navigation back button
headerbackbutton react-navigation
react-navigation headerbacktitle
react native back button
react native header
react-navigation header call function

I am trying to call a custom function inside a custom button in my react navigation header. I've looked around several ways to do this, and the best result I've found is making the function static, that is:

export class MyClass extends React.Component{
     static navigationOptions = ({navigation}) => ({
         headerRight: (<Button title='press me' onPress={()=> MyClass.SomeFunction() } ></Button>)
     });
     static SomeFunction(){
        /*Some code here*/
     }
     /*Some extra code here*/
}

My issue is, however, that I need to access some state properties within SomeFunction() and, as you may know, you cannot acces this within a static function.

Is there any way I can access the state of a component within a static, or is there a better way to implement a custom function within a button in the header????

As an alternative solution you might set the navigator state to set and get values.

If you use an AppWithNavigation state parent as a root of your navigation structure you should be pass a navigation prop to children elements like below:

render() {
    const { dispatch, nav, } = this.props
    return (
        <AppNavigator
            navigation={addNavigationHelpers({
                dispatch: dispatch,
                state: nav,
            })}
        />
    )
}

If so, just set your values by using the following line:

this.props.navigation.setParams({someValue: 'Value'})

Then get your set value whenever you want like the below:

this.props.navigation.state.someValue

Or

const { someValue } = this.props.navigation.state

But keep in mind, when first rendering the component state may be null or undefined. So you need to check its existing before try to get:

if (!this.props.navigation.state) {
    return null
}

const someValue = this.navigation.state.someValue

if (someValue) {
    /* you can use your someValue here! */
}

Note to that every route has its own state object. When your screen is changed, the state of your this.props.navigation.state object is changed. If you need a global solution, I think, you might use Redux.

custom function on header right button · Issue #495 · react , custom function on header right button #495 since it will search for its own class methods which is react-navigation in this case. react-native-cli: 2.0.1 The most common way to interact with a header is by tapping on a button either to the left or the right of the title. Let's add a button to the right side of the header (one of the most difficult places to touch on your entire screen, depending on finger and phone size, but also a normal place to put buttons).

after some time messing around with the code, I found a solution that better fits my needs. I post it below in case it helps anyone. Thank you all for your contributions :D

export class MyClass extends React.Component{
   static navigationOption = ({navigation}) => ({
       headerRight: (<Button title='Press Me!' onPress={() => MyClass.SomeFunc() })
   })

   //The function 
   static SomeFun(){
       alert(MyClass.SomeState.abc)
   }

   //Static functioning as state
   static SomeState = {
       abc: 'def'
   }
}

Call class method in header button · Issue #154 · react-navigation , I have this class with a right button in the header export default class NewSpotScreen extends Component { static navigationOptions = { header:  this.foo() is not recognised since it will search for its own class methods which is react-navigation in this case.Therefore to overcome this issue , you need to take a global variable say 'take' to be defined outside the class and then to assign value 'this' to the global variable 'take' inside the render() function.

Here is an approach straight from their documentation https://reactnavigation.org/docs/en/header-buttons.html

There is also an npm module to make this a bit easier. https://www.npmjs.com/package/react-navigation-underscore

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      headerTitle: <LogoTitle />,
      headerRight: (
        <Button onPress={params.increaseCount} title="+1" color="#fff" />
      ),
    };
  };

  componentWillMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  state = {
    count: 0,
  };

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  /* later in the render function we display the count */
}

Header buttons, Now that we know how to customize the look of our headers, let's make them Supported React Native versions · Community Navigators and Libraries function StackScreen() { This is pretty important because it's extremely common to want the buttons in your header to interact with the screen that the header belongs to. React Native does not provide any header by default, it comes when we add React Navigation to switch the activity. Sometimes we have to customize the header according to the needs and we can easily do it with the help of navigation options. In this post, we will see the full customized header and customization of the right and left header.

Communitication Between a Header Button and Screen in Reason , Now that we know how to customize the look of our headers, let's make them Getting started · Hello React Navigation · Supported React Native versions buttons in your header to interact with the screen that the header belongs to. The most commonly used pattern for giving a header button access to a function on the  Note: Header is only available for StackNavigator. In the previous Video, we created a StackNavigator to display Products and Home screens in our app. today we will create header Button with

How to pass/access custom functions in header? (React Navigation , setState({ count: this.state.count + 1 }); }; /* later in the render function we display If you have your own custom component here, you should make sure it was so I checked github to see if anyone had tried it in react-native . headerStyle: a style object that will be applied to the View that wraps the header. If you set backgroundColor on it, that will be the color of your header. headerTintColor: the back button and title both use this property as their color. In the example below, we set the tint color to white (#fff) so the back button and the header title would be white.

React Native: React Navigation, setOptions , I don't see my custom function in navigation prop. Have I missed something or I had to set header button in component itself like this: I built an open source component in React Native so you can do it too. Link in comment. A basic button component that should render nicely on any platform. Supports a minimal level of customization. If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at the source code for this button component.

Comments
  • no need to make the function static.