onPress in functional react native component not working

Question

I'm trying to create a simple reusable button component in react-native but for some reason the onPress function never gets called. Most threads I find simply call the function instantly or declared something wrong I believe everything should be fine with my declaration and I tried several different forms as well but to no avail

import React from 'react';
import { Text, Button, Image, TouchableOpacity } from 'react-native';
import { useHistory } from "react-router-native";
import { getFileUrl } from '../db/firebaseDb';
import styles from '../modules/Styles';

const GameIcon = (props) => {
  const history = useHistory();

  const handleClick = (pId) => {
    console.log("TEST");
    history.push("/game");
  }

  return (
    <TouchableOpacity activeOpacity="0.5" onPress={handleClick}>
      {(props.imageUrl)?<Image source={{uri: props.imageUrl}} style={{width: 32, height: 32}}/>:<Text>loading...</Text>}
      <Button title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}/>
    </TouchableOpacity>
  )
}

export default GameIcon;

The console.log is never triggered and I have no clue why... I tried writing the component as function GameIcon... I tried this without the TouchableOpacity and just having the button in the return function... nothing works neither on an actual device nor an emulator

Small update:

I changed the content of the return function to:

<TouchableOpacity activeOpacity={0.5} onPress={()=>console.log("HELLO")}>
  <Text title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}>{props.game.id}</Text>
</TouchableOpacity>

The component renders with no errors or anything, it can be tabbed and the opacity changes correctly but onPress is not called (so no console log)

This doesn't seem to be limited to only functional components...

I added the button example from the react-native docs 1:1 onto my homescreen and the onPress event never gets called:

<Button
  onPress={() => {
    alert('You tapped the button!');
  }}
  title="Press Me"
/>

Answer 1

Please try this code.

import React from 'react';
import { Text, Button, Image, TouchableOpacity } from 'react-native';
import { useHistory } from "react-router-native";
import { getFileUrl } from '../db/firebaseDb';
import styles from '../modules/Styles';

const GameIcon = (props) => {
  const history = useHistory();

  const handleClick = (pId) => {
    console.log("TEST");
    history.push("/game");
  }

  return (
    <TouchableOpacity activeOpacity={0.5} onPress={handleClick}>
    <Text title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}>{props.game.id}</Text>
    </TouchableOpacity>
  )
}

export default GameIcon;

Answer 2

I'm trying to create a simple reusable button component in react-native but for some reason the onPress function never gets called. Most threads I find simply call the function instantly or declared something wrong I believe everything should be fine with my declaration and I tried several different forms as well but to no avail

import React from 'react';
import { Text, Button, Image, TouchableOpacity } from 'react-native';
import { useHistory } from "react-router-native";
import { getFileUrl } from '../db/firebaseDb';
import styles from '../modules/Styles';

const GameIcon = (props) => {
  const history = useHistory();

  const handleClick = (pId) => {
    console.log("TEST");
    history.push("/game");
  }

  return (
    <TouchableOpacity activeOpacity="0.5" onPress={handleClick}>
      {(props.imageUrl)?<Image source={{uri: props.imageUrl}} style={{width: 32, height: 32}}/>:<Text>loading...</Text>}
      <Button title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}/>
    </TouchableOpacity>
  )
}

export default GameIcon;

The console.log is never triggered and I have no clue why... I tried writing the component as function GameIcon... I tried this without the TouchableOpacity and just having the button in the return function... nothing works neither on an actual device nor an emulator

Small update:

I changed the content of the return function to:

<TouchableOpacity activeOpacity={0.5} onPress={()=>console.log("HELLO")}>
  <Text title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}>{props.game.id}</Text>
</TouchableOpacity>

The component renders with no errors or anything, it can be tabbed and the opacity changes correctly but onPress is not called (so no console log)

This doesn't seem to be limited to only functional components...

I added the button example from the react-native docs 1:1 onto my homescreen and the onPress event never gets called:

<Button
  onPress={() => {
    alert('You tapped the button!');
  }}
  title="Press Me"
/>

Answer 3

So I had some macOS updates pending and it turns out that somehow they were the cause for this... How I do still not understand... This should be independent from operating system updates, right? Anyways... 15 minutes and a lot of restarts later and now both onPress functions work as they should - Thanks again to everyone who tried to help!

UPDATE: Booted my Mac up again today and same issue - it was working all day long yesterday after the updates but today exact same issue - all buttons respond to being pressed, no button triggers onPress function

FINAL UPDATE: I found the reason for this: It's a react-native bug and only happens in debug mode - read more here: https://github.com/facebook/react-native/issues/28687

Answer 4

It may be also react-native-gesture-handler

npm install --save react-native-gesture-handler

Then import first in index.js

import 'react-native-gesture-handler';