I can't call a function via TouchableOpacity's onPress()

Question

I am somewhat at a loss as to why I keep getting TypeError: Chat.onCameraClick is not a function. (In 'Chat.onCameraClick()', 'Chat.onCameraClick' is undefined).

I have the following:

export default class Chat extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'Chat',
    headerTintColor: colors.HEADERTINT,
    headerStyle: {
      backgroundColor: colors.HEADER,
    },
    headerLeft: () => (
      <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
        <Icon
          name="menu"
          size={24}
          style={{ color: colors.BLACK, marginLeft: 10 }}
        />
      </TouchableOpacity>
    ),
    headerRight: () => (
      <TouchableOpacity onPress={() => this.onCameraClick()}>
        <Icon
          name="camera"
          type='font-awesome'
          size={24}
          style={{ color: colors.BLACK, marginRight: 10 }}
        />
      </TouchableOpacity>
    ),
  });

Further down, I just have the camera method:

  onCameraClick = () => {
    console.log("Pic!");
  }

I looked at posts like RN TouchableOpacity onPress dosn't call function and the touchableopacity docs here https://facebook.github.io/react-native/docs/touchableopacity but I am unsure as to why this would be "undefined" I have also tried to just call onPress={this.onCameraClick} but basically the same happens.

What am I missing here?

I tried that. No error but nothing happens. – Feb 20 '20 at 17:41 — , Feb 20 '20 at 17:41
O shoot this should work, sorry.... – Anthony Marino Feb 20 '20 at 17:53 — Anthony Marino, Feb 20 '20 at 17:53

score 0 · Answer 1 · answered Feb 22 '20 at 14:27

i see your code i have made a little modification in it. and it is working now.

headerRight: () => (
  <TouchableOpacity onPress={this.onCameraClick}> // <<--- here
    <Icon
  name="camera"
  type='font-awesome'
  size={24}
  style={{ color: colors.BLACK, marginRight: 10 }}
/>
  </TouchableOpacity>
),

where you called your function just remove the round brackets and just make one arrow function.

score 0 · Accepted Answer · answered Feb 22 '20 at 15:32

The reason why this wasn't working was because I'm calling a function from within my class from the navigation and that works separately. In order to get it to work, I had to set the param and then call it above.

Adding to my componentDidMount():

this.props.navigation.setParams({ onCameraClick: this.onCameraClick });

And then changing the navigation to:

<TouchableOpacity onPress={navigation.getParam('onCameraClick')}>

I can't call a function via TouchableOpacity's onPress()

2 Answers2