I'm using React native navigation. (Stack Navigation). But I can't call function in navigationOptions. Not working.

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableHighlight, AsyncStorage, Alert } from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import HandleBack from '../../HandleBack';

export default class Dashboard extends Component {
    constructor(props) {
        super(props);
    }

    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Dasboard',
            headerLeft: null,
            headerRight: (
                <TouchableHighlight underlayColor='transparent' onPress={this.login.bind(this)} style={{marginRight: 10}}>
                    <Icon
                        name="power-off"
                        size={25}
                        color="white"
                    />
                </TouchableHighlight>
            )
        };
    };

    login() {
        alert('Button clicked!');
    }

    onBack = () => {
        this.props.navigation.navigate('Screen3');
    };    

    render() {        
        return(
            <HandleBack onBack={ this.onBack }>
                <View>
                    <Text> This is screen 2 </Text>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}> 
                        <Text> Go to Screen 3 </Text>
                    </TouchableHighlight>
                </View>
            </HandleBack>
        )
    }
}

When I'm using onPress={this.login.bind(this)} get error

"TypeError: TypeError: undefined is not an object (evaluatinh '_class.login.bind')"

When I'm using onPress={this.login} no reaction.

When I'm using onPress={this.login()} get error

TypeError: TypeError: _class.login is not a function.

But

I'm using onPress={() => alert('test')} is working.

I'm using React native navigation. (Stack Navigation). But I can't call function in navigationOptions. Not working.

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableHighlight, AsyncStorage, Alert } from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import HandleBack from '../../HandleBack';

export default class Dashboard extends Component {
    constructor(props) {
        super(props);
    }

    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Dasboard',
            headerLeft: null,
            headerRight: (
                <TouchableHighlight underlayColor='transparent' onPress={this.login.bind(this)} style={{marginRight: 10}}>
                    <Icon
                        name="power-off"
                        size={25}
                        color="white"
                    />
                </TouchableHighlight>
            )
        };
    };

    login() {
        alert('Button clicked!');
    }

    onBack = () => {
        this.props.navigation.navigate('Screen3');
    };    

    render() {        
        return(
            <HandleBack onBack={ this.onBack }>
                <View>
                    <Text> This is screen 2 </Text>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}> 
                        <Text> Go to Screen 3 </Text>
                    </TouchableHighlight>
                </View>
            </HandleBack>
        )
    }
}

When I'm using onPress={this.login.bind(this)} get error

"TypeError: TypeError: undefined is not an object (evaluatinh '_class.login.bind')"

When I'm using onPress={this.login} no reaction.

When I'm using onPress={this.login()} get error

TypeError: TypeError: _class.login is not a function.

But

I'm using onPress={() => alert('test')} is working.

• javascript
• react-native
• react-native-navigation

• Try removing static – Maheer Ali Commented Mar 15, 2019 at 6:08
• Then navigationOptions does not work. – Gündoğdu Yakıcı Commented Mar 15, 2019 at 6:10
• 1 you will never have context of this inside a static function, unless you pass it explicitely – warl0ck Commented Mar 15, 2019 at 6:12
• This is a react-native-navigation error or bug. – Gündoğdu Yakıcı Commented Mar 15, 2019 at 6:13
• btw where are you are calling navigationOptions – Maheer Ali Commented Mar 15, 2019 at 6:14

1 Answer 1

you can achieve it using setParams or getParams for react-navigation.

export default class Dashboard extends Component {


    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Dasboard',
            headerLeft: null,
            headerRight: (
                <TouchableHighlight underlayColor='transparent' 
                 onPress={navigation.getParam('login')} //call that function in onPress using getParam which we already set in ponentDidMount
                   style={{marginRight: 10}}>
                    <Icon
                        name="power-off"
                        size={25}
                        color="white"
                    />
                </TouchableHighlight>
            )
        };
    };
   login() {
        alert('login click')
    }
    onBack = () => {
        this.props.navigation.navigate('Screen3');
    };    

ponentDidMount() {
        this.props.navigation.setParams({ login: this.login }); //initialize your function
    }
    render() {        
        return(
          .....
        )
    }
}