3

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"
/>
Dinkelborg
  • 49
  • 1
  • 5
  • call this.handleClick in onPress – Wahdat Jan Apr 20 '20 at 08:20
  • 1
    @WahdatKashmiri its functional component. `this` only works in class components. – Hashir Baig Apr 20 '20 at 08:23
  • your handle click is taking some argument – Wahdat Jan Apr 20 '20 at 08:24
  • Try to call handleClick instead of referencing it `onPress={() => handleClick('argument')}` – Mahdi N Apr 20 '20 at 08:25
  • @MahdiN I tried that already unfortunately same outcome – Dinkelborg Apr 20 '20 at 08:32
  • I don't know if your problem is caused by this but `activeOpacity` prop take a number not string. change it to `activeOpacity={0.5}`. Do you use any position="absolute" in button style? – Mahdi N Apr 20 '20 at 08:52
  • @MahdiN I changed the "0.5" to {0.5} now and I see that the click effect changed - so the opacity is working now, thanks but the onPress sadly still doesn't work the only style defined for button is this: buttons: { fontWeight: "bold", } so no position absolute - none of my styles uses the position attribute so far – Dinkelborg Apr 20 '20 at 09:07
  • Could you try to post your code in expo to try a minimal reproducible example? – Ian Vasco Apr 20 '20 at 13:55
  • It could be that the button is swallowing the click rather then being handled by the touchable. – fuzz Apr 20 '20 at 08:28
  • I had that idea too I tried to make sure that that is not the problem by kicking out the button and just leaving a component inside of the TouchableOpacity - same result ... you can click it but onPress is never called – Dinkelborg Apr 20 '20 at 08:34

3 Answers3

2

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;
gypsicoder
  • 5,416
  • 5
  • 24
  • 38
  • This is the code I'm using - id doesn't work for some reason ... or better it only works some times like yesterday after a Mac OS update ... it might have to do with some cache or something – Dinkelborg Apr 21 '20 at 07:27
0

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

Dinkelborg
  • 49
  • 1
  • 5
0

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';
Turan Zamanlı
  • 3,828
  • 1
  • 15
  • 23