react-native : onPress doesn't work

Question

I work on an onPress event on react native. At a first time, I wrote that code :

<TouchableOpacity
    onPress={(this.props.minimum==null||this.props.value-1>=this.props.minimum)
        ? this.props.onDecrement
        :console.log(this.props.texte+" : minimum atteint")}
    style={[buttonSpinner,buttonSpinnerLeft]}>

With that, my button works, but onPress is called automatically on each render() call. I search and I found a solution here : React Native onPress being called automatically.

But now, if I don't have any automatic call... I don't have call when I press on my Touchable component.

I try some versions :

const p=this.props;
//some other code
<TouchableOpacity
    onPress={()=>(p.minimum==null||p.value-1>=p.minimum)
        ? p.onDecrement
        :console.log(p.texte+" : minimum atteint")}
    style={[buttonSpinner,buttonSpinnerLeft]}>

--

const p=this.props;
// some other code
<TouchableOpacity
    onPress={(p)=>(p.minimum==null||p.value-1>=p.minimum)
        ? p.onDecrement
        :console.log(p.texte+" : minimum atteint")}
    style={[buttonSpinner,buttonSpinnerLeft]}>

--

<TouchableOpacity
    onPress={()=>(this.props.minimum==null||this.props.value-1>=this.props.minimum)
        ? this.props.onDecrement
        :console.log(this.props.texte+" : minimum atteint")}
    style={[buttonSpinner,buttonSpinnerLeft]}>

Without success...

Precision, I work on a separated component. This component is called in a main render like that :

<NumberSpinner
    onDecrement = {()=>this.onDecrement(elt.idCat,idElt)}
    onIncrement = {()=>this.onIncrement(elt.idCat,idElt)}
    minimum = {0}
    maximum = {null}
    texte = {elt.slug}
    value={elt.qteTxt}
/>

score 3 · Accepted Answer · answered Apr 10 '18 at 10:57

3

Try to move your logic in a function so use the onPress with a function call only

<TouchableOpacity
         onPress={this.onPress}
       >
   <Text> Touch Here </Text>
</TouchableOpacity>

and your function:

onPress = () => {
   //your logic here
  }

answered Apr 10 '18 at 10:57

oma

1,804
12
13

That doesn't work. Or to be precise, I have the console.log who works but not the underfunction. onPressDecrement = () => ((this.props.minimum==null||this.props.value-1>=this.props.minimum) ? this.props.onDecrement :console.log(this.props.texte+" : minimum atteint")); I'm editing first post to precise the context. – Lothindil Apr 10 '18 at 11:14
So the onPress is working, the problem seems to be in your if statement. – oma Apr 10 '18 at 11:18
if statement works correct on the first version (that who is called in each render) – Lothindil Apr 10 '18 at 11:22
It works ! With this code on function : onPressDecrement = () =>((this.props.minimum==null||this.props.value-1>=this.props.minimum) ? this.props.onDecrement() :console.log(this.props.texte+" : minimum atteint")); – Lothindil Apr 10 '18 at 11:32
o.. yes.. call the function :) I missed that too :p. Good job. – oma Apr 10 '18 at 11:36
You need to import `TouchableOpacity` from `react-native` instead of importing it from `react-native-gesture-handler`. The version in `react-native-gesture-handler` is 100% broken. The version in `react-native` works. The accepted answer does not solve this problem. – Andrew Koster Dec 16 '19 at 22:10

score 2 · Answer 2 · answered Nov 03 '19 at 23:59

You need to import TouchableOpacity from react-native instead of importing it from react-native-gesture-handler. The version in react-native-gesture-handler is 100% broken. The version in react-native works.

The accepted answer does not solve this problem.

react-native : onPress doesn't work

2 Answers2