I have a HomePage.js which contains About Us button, and when I click on that button I want to show AboutUs.js. The HomePage.js is displayed correctly, however, when I click on the button it gives me the following error: this.props.onPress is not a function. (In 'this.props.onPress(e)', 'this.props.onPress' is an instance of Object)

I have App.js

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import HomePage from './HomePage';
import AboutUs from './AboutUs';


const App = StackNavigator({
    HomePage: {
        screen: HomePage,
        navigationOptions: {
            header: () => null
        }
    },
    AboutUs: { 
      screen: AboutUs,
        navigationOptions: {
          header: () => null
        }
     }
});

export default App;

Then I have a reusable component Button.js:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
    return (
        <TouchableOpacity onPress={onPress}>
            <Text>{children}</Text>
        </TouchableOpacity>
    );
};

export { Button };

HomePage.js which is rendering the Button component. When I press it I get the above mentioned error

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Button } from './Button.js';
import AboutUs from './AboutUs';

class HomePage extends Component{

  render() {
    const { navigate } = this.props.navigation;
    return(
      <View>
        <Button
          onPress={() => navigate('AboutUs'), { name: 'About Us' }}
          >About Us</Button>
      </View>
    )
  }
}

export default HomePage;

AboutUs.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class AboutUs extends Component {
    render() {
        return (
      <View>
            <Text>About us!</Text>
      </View>
        );
    }
}

export default AboutUs;

I have a HomePage.js which contains About Us button, and when I click on that button I want to show AboutUs.js. The HomePage.js is displayed correctly, however, when I click on the button it gives me the following error: this.props.onPress is not a function. (In 'this.props.onPress(e)', 'this.props.onPress' is an instance of Object)

I have App.js

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import HomePage from './HomePage';
import AboutUs from './AboutUs';


const App = StackNavigator({
    HomePage: {
        screen: HomePage,
        navigationOptions: {
            header: () => null
        }
    },
    AboutUs: { 
      screen: AboutUs,
        navigationOptions: {
          header: () => null
        }
     }
});

export default App;

Then I have a reusable component Button.js:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
    return (
        <TouchableOpacity onPress={onPress}>
            <Text>{children}</Text>
        </TouchableOpacity>
    );
};

export { Button };

HomePage.js which is rendering the Button component. When I press it I get the above mentioned error

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Button } from './Button.js';
import AboutUs from './AboutUs';

class HomePage extends Component{

  render() {
    const { navigate } = this.props.navigation;
    return(
      <View>
        <Button
          onPress={() => navigate('AboutUs'), { name: 'About Us' }}
          >About Us</Button>
      </View>
    )
  }
}

export default HomePage;

AboutUs.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class AboutUs extends Component {
    render() {
        return (
      <View>
            <Text>About us!</Text>
      </View>
        );
    }
}

export default AboutUs;

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

• What do you try to pass here? onPress={() => navigate('AboutUs'), { name: 'About Us' }} Seems the `, { name: 'About Us' } part is superfluous – Sven Tschui Commented Nov 12, 2017 at 19:10
• this is not a valid function reference onPress={() => navigate('AboutUs'), { name: 'About Us' }} – Sagiv b.g Commented Nov 12, 2017 at 19:11
• {name: 'About Us'} will be the header of the page, it is referenced in title: navigation.state.params.name The error further says In 'this.props.onPress(e)', 'this.props.onPress' is an instance of Object. – Tom Bom Commented Nov 12, 2017 at 19:21
• as Sag1v's and my comment already pointed out. You are not passing a function to the onPress prop but rather something invalid (syntax error). I think you meant to pass the { name: 'About us' } object as the second argument of the navigate function. Sou you messed of braces – Sven Tschui Commented Nov 12, 2017 at 19:55
• Ok, got it! Make it an official answer – Tom Bom Commented Nov 12, 2017 at 19:58

3 Answers 3

This is not a valid function reference

onPress={() => navigate('AboutUs'), { name: 'About Us' }}

seems like you mixed up { name: 'About Us' } inside the function ref instead of as a prop to Button

I had a similar issue with the same error: "this.props.onPress is not a function" The mistake I made was using:

onPress={this.props.incrementCount()}

where the correct syntax is:

onPress={ () => this.props.incrementCount()}

the latter returns the results of the function.

for me it was i missed a curly brackets

onPress={() => {navigate('AboutUs'), { name: 'About Us' }}}